Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #430935

    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?

    #431551

    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

    #431717

    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!

    #431725

    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.

    #432394

    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

    #433168

    Will the slider still be responsive then and images render correctly on phone/tablet?

    #433733

    Hi!

    Yep.

    Best regards,
    Elliott

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.