Keep Slider Block Same Height with Different Images

Hi Cliff-

Thanks for reaching out! Probably the best way to avoid this issue is to make sure that the images you’re using in your slider maintain the same aspect ratio. When you first add images to your slider, you’ll be presented with this dialog to make sure your slides remain the same size:

This is the ideal way to handle that, because if you do start using images of different aspect ratios, they’ll be scaled differently on different screen sizes. So if you force it to remain the same size on a desktop monitor, they may end up looking too tall on a mobile phone.

It may be possible to add some Custom CSS to your sliders to make sure that they stay the same height, but it will be unique to the images you’re using and various screen sizes.

Hi Cliff-

One alternative you could consider is using a slider-type image gallery, if your slider consists of only images, or images with captions. That will display images in a lightbox-style gallery that pops-up above the page content, and doesn’t shift the page layout.

Hi Antonis-

There are a couple ways you can mitigate this other than the above solution of using a slider-type gallery, but I don’t really consider them to be ideal.

For example, you can determine the height of your vertical photos, and set the entire slider to be a little bit taller. This would have the benefit of keeping the navigation arrow buttons in the same place, but they wouldn’t be “centered”  vertically on the shorter slides.

To accomplish that, you could use CSS Code like this:

.slick-slider { height: 500px; }

The other downside of that approach is that this rule would be in effect for all of your sliders, unless you do something like make separate CSS rules for individual posts and pages, for example something like this:

body.page-id-ID .slick-slider { height 500px; }

Where ID is the numeric page ID.

If you’d like to try something like this out, include the URL to one of your sliders in the “Website” field of a reply here, and I can provide you with an exact rule for your image size and page ID.

Hi Antonis!

I sent this CSS in a response to your Premium Support ticket, but I am including it here as well just in case someone else might need to achieve a similar design with their sliders. The following code should vertically align the horizontal slider images to appear in the middle instead of pushed up against the top.

body.page-id-725 .slick-initialized .slick-slide { display: flex; }

body.page-id-725 .slick-slide { height: 310px; align-items: center; justify-content: center; }

body.page-id-725 .slick-list { height: unset !important; }

Unfortunately there isn’t a way to advance the slides by clicking on them directly, only the navigation dots and arrows will advance on click, but you can also click and drag on each of the slides to move through your slider content.

Please let us know if you ever have any other questions for us!