How to keep the slider's size ratio at any screen?

There are a lot of things affecting the size of sliders, what you can see here. In this documentation we will address what configuration is required to let your slider scale up and down by keeping its size ratio.

Limit slide width

Turn off Limit slide width. This changes your slider's ratio on bigger screens.

Layout

At the Layout, don't use Min height, as that changes the ratio on smaller screens.

You also shouldn't use Fullpage layout, because that makes your slider have the size of the screen.

Controls

Controls have their own unique responsive behaviors, which cannot be changed. Don't use controls, if that bothers you.

Layers

Text layers (and some other layers too) don't have options to scale up/down by following the slider's size ratio. The reason of this is to avoid CLS issues. So if you want everything to scale with the slider, don't use layers. Only use slide background image or background video.

But if this is fine for you, and you only want to keep the background's ratio, then you shouldn't use too many or too big layers. Our slider has a rule, that a slide's height is at least as big as the height of your layers, margins and paddings are and your entire slider is as big as the highest slide is.

Because of this, you must make sure that your content isn't bigger than your slide is.

On tablet and mobile screens you could use options, like font resizing, layer hiding or make paddings, margins, maximum widths smaller to have smaller/less content.

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