Max Slider height without Limit Slide Width

If you want to prevent the slider from getting too large on bigger screens, you can use the Limit Slide Width option. This limits the slide of the size, and that prevents the slider from growing too tall. Without the limit slide with, a 1200x600px slider would be 1920x960px on a fullHD monitor. With the Limit slide with on, the slider can't be taller than 600px on bigger screens, so on a fullHD monitor it would be 1920x600px.

Limit slide width off (left) and on (right) Limit slide width off (left) and on (right)

When the Limit Slide Width option fixes the slide width, it leaves the slide on the middle. So if you want your content to be on the left side of the slider, you need to turn it on. However, this will make the slider have bigger height on wider screens.

How to create a fix height for the slider?

There's a tick what you can use to have unlimited slide width, but a limited slider height. So you can create left or right aligned content, or even a completely full width content.

Left aligned content (left) with the Limit slide off, and the default center aligned content (right) Left aligned content (left) with the Limit slide off, and the default center aligned content (right)

☝️ Note: This tutorial only works if you use Default positioned layers!

Creating left aligned content

1
Set a small slider height

In most cases we recommend working with sliders that are 1200px wide and 500-800px high. If you want to have a max height without the Limit Slide Width, you should use a much less height for the slider. For example, 200px.

2
Turn off the Limit Slide Width

You don't want to limit the width of your slides, so turn off the Limit Slide Width option before proceeding.

3
Build your slides

Build your slide content as you would do normally. Default layers increase the height of the slider, if they need more space, and that's going to make the slider bigger.

4
Increase the slider height

Say, you want to have a 600px high slide, but your content is only 400px high. Add some paddings to make the slider taller! 

5
Align the Content

Now all you need to do is to give a Max Width to the content layer, and change its Align.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.