What affects the size of the slider?
In this article
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.