What affects the size of the slider?

In this documentation you will find almost every single option, which defines how big your slider is on any screen size.

Content in a slide

The most important rule Smart Slider has is that a slide's height is at least as big as the height of its layers, margins and paddings are and your entire slider is as big as the highest slide is.

On this slider there are a couple of layers and a tall image.

See the same slider with less layers:

So no matter what settings you will use, your content will define the minimum height of your slider on desktop, tablet and mobile devices too.

Common problem on mobile phones is, that this creates too high sliders:

Use options, like font resizing, layer hiding or make paddings, margins, maximum widths smaller on mobile (and tablet) view to have smaller/less content. Learn more about why is the slider so tall on mobile.

Tallest slide in the slider

Also, within your slider, the highest slide's height matters. That is how high all your slides will be. As you see here, a small first slide and a high second slide will result both slides to be high:

If you edited your current slide, but it is still too high, the problem will most likely come from a different slide. Unpublish all your slides besides the first one, and start editing this first slide. If it is fine, publish the 2nd slide and edit that one. And so on. That way you will figure out which slide creates the issue.

Slider size

The slider's size defines the ratio of your slider. This is the basic sizing, and the next options were built to modify this behavior.

Limit Slide Width

The Slider size - height value will become the maximum height of the slider. (Unless you add a lot of many layers that need more space than the set slider height.)

We call it Limit slide width , because the Slider size - width will become the maximum point how far your layers can go.

So if you want your layer to always be on the very left or right side of your slider, you have to turn this option off. Turning off Limit slide width will let your content take the full width of the slide, but it will also result large slider height on bigger screens.

Layout

The layout defines how the resizing will work.

Boxed

Your slider will be maximum as wide, as your theme/template allows it to be.

Settings

Downscale

This option allows your slider to go smaller from the Slider size - width, when the slider is in a smaller place.

Upscale

This option allows your slider to go bigger from the Slider size - width, when the slider is in a wider place.

Min Height

If you add a minimum height, your slider's height won't go smaller from that.

Fullwidth

Your slider will be as wide as the screen is.

Settings

Min Height

If you add a minimum height, your slider's height won't go smaller from that.

Force Full Width

When this option is turned off, you will have Boxed layout with Upscale and Downscale being turned on.

When this option is turned on, it will use JavaScript to go over theme/template created width limitations. So if your fullwidth slider isn't fullwidth, you should turn this option on.

Fullpage

The slider is as big as the browser screen is, both in height and width. But the content still defines a minimum height here too, so you must make sure you don't have too much content, if you want a screen sized slider.

You can read more about this layout at its documentation.

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