I posted on this problem before, but wasn’t resolved. Another user, danfarberoff posted the same problem and his solution:
“I’ve got several EasySliders on a single page, which mix landscape and portrait images. But because the slider height is flexible and depends on the image height the result is that the page content keeps moving up and down like crazy every time a new slide loads.”
“Solved it using a ‘top: 50%;’ on .avia-slideshow and a ‘translateY(-50%)’ command on the .avia-slideshow-inner.”
The original post is here: https://kriesi.at/support/topic/easyslider-height-fix/
Can someone expand on danfarberoffthe solution with the full CSS block. I don’t know where to make these in my child-theme. Where does “top: 50%” and “translateY(-50%)” go?
Hi stanbrid!
You can do something like this to force the height.
.avia-slideshow, .avia-slideshow img {
max-height: 300px;
}
But depending on the sizes you use the images may look a bit distorted.
Cheers!
Elliott
How can it be corrected without distorting images? The images are med to high res. I know the theme isn’t designed to settle for distorted images. It’s much too good.
Thank you for the help!
This also kills the responsive layout. Forced the container height to 630px, which leaves a huge block of white space underneath since the slider image has adjusted. Look forward to your solution.
Hey!
Not sure on how we could do that without distorting them. If it was me I would crop the images before uploading so they are all the same aspect ratio.
Best regards,
Elliott
Will the slider still be responsive then and images render correctly on phone/tablet?
Hi!
Yep.
Best regards,
Elliott