Here’s how the slider height works in Smart Slider:
1. First, the height is based on the “height” value at Slider settings > Size:
At your slider I think you use 960x720px slider size.
With the default settings (
Limit slide widthenabled, using none of the custom sizes next to it) when the slider is wider than 960 it keeps the set 720px height. So, on a fullHD screen your full width slider has 1920x720px height.
If you use a custom
Limit slide width(e.g. by enabling the Desktop option) and set a different value there, that can allow the slider to be taller than the set slider height.
Slider size: 960x720px
Limit Slide Width – Desktop: 1200px
This means that the slider heigth will be increased until the slider reaches 1200px width, keeping the original ratio (set by the slider size). So at 1200px the height of the slider is 900px, and that height stays after the slider gets wider than 1200px.
On a fullHD monitor the slider with the settings above will have 1920x900px height.
Limit slide widthis disabled, the slider scales up keeping the orignal ratio the slider size sets. So a 960x720px slider will be 1920x1440px on a fullHD monitor.
If the content on the slider needs more vertical space, that can increase the height of the slider as well. A typical example of this is the mobile views. On a phone limited width is available, so the content needs more vertical space due to texts breaking into more lines. So if you have at least one slider that needs
The way Smart Slider works is that it uses the same height for every slide. So if you have at least one tall slide, it will increaes the height of all other slides as well.
So in your case what I can recommend:
1) For desktop
Turn on the
Limit Slide Widthand make sure the Desktop, Tablet and Mobile custom sizes are disabled. This will make your slider keep the given 720px height. If that’s still too much, reduce the slider height:
2) For mobile
The content on your “Tout l’univers du Dirt Bike Découvrez la gamme YCF 2021” slide seems to increase the height of the slider due to the lenght and font size of this text. I recommend reducing the font size using the Font resizer:
OK THANKS FOR YOUR FULL ANSWER but I just wanted to reduce the overall height to 400 px for the desktop and have it reflected in responsive design.
Reading your answer; I don’t feel like we can do this intuitively
maybe I didn’t understand
If you just want 400px height, then set the height to 400px at Slider settings > Size tab > under Slider size: Height:
And make sure only the Limit slide width is enabled in the row below this option.
As you see here:
This will make the slider height 400px.
To ensure the texts can fit properly on mobile, you might need to use the Font resizer on mobile:
We’ve got a tutorial video that shows how to check the mobile view for editing, if you wouldn’t know that yet:
It also shows the usage of the Font resizer.
It’s based on the “Slide background image fill” option: https://smartslider.helpscoutdocs.com/article/1809-slider-settings-slides
how your images look like in the slider. By default the “fill” option is used which will make the image as big as it needs to be to cover the whole slider. This means that if the slider and image ratios differ, the image will be cropped.
Currently you’re using “fit” mode which means the images won’t cover the whole slide area, but they’ll fit into the available slider size without any kind of cropping. If the slider and image dimensions don’t match (like yours don’t) there will be empty spaces around the image.
If you want the images to cover the slider you should switch back to the “fill” mode.
The Fill mode can be changed at the slide level, at Slide > Style tab: https://smartslider.helpscoutdocs.com/article/1724-slide#image
make sure you have “Slider’s default” selected there.
- The topic ‘change height slider’ is closed to new replies.