Changing the Height of Divi Sliders
How to achieve responsive slider heights in Divi
Setting the height of sliders in the Divi Theme (and other sites using Divi Builder) can be a surprisingly difficult task. Here's how to take control of your sliders and get them to display at the height you want on desktops, mobiles and tablets.
Option 1: Setting the Slider Height in Divi Builder
First of all, Divi doesn't include a built-in slider height option.
Instead, the height is determined from the contents of the slides. The contents of a slide are typically the slide description (with title, text and buttons) and the slide image. In order to leave some height above and below these contents, Divi adds 16% top and bottom padding to the slide description. So in most cases the height of an individual slide is a result of the slide description height plus the 16% padding.
The height of the slider is then set as the height of the tallest slide, and all slides then are displayed at this same height.
The closest you can get to setting the height of a slider from within Divi itself is to use the "Custom Padding" option in the slide settings. This controls the padding above and below the slide description, and as a result can have an effect on the overall height of the slide and slider.
The benefits of this way is that it's built-in to Divi and the padding can be set separately on desktops, mobiles and tablets (by clicking on the mobile icon that appears to the right of the option).
The downsides include that changes to the slide contents, such as changing text or adding / removing a slide, can through the height unexpectedly out of whack. Likewise word wrapping as you shrink the window size might cause the slider to sporadically increase in height, which is the opposite of what you're likely to want.
Option 2: Setting the Slider Height using Divi Booster
As of version 2.6.4, Divi Booster adds a new slider height option that takes care of the messy details for you.
You'll find the new "Height" option in the Slider Module Settings, on the "Design" tab under the "Sizing" subheading.
In older versions of Divi, you'll find the option either under the "Layout" subheading or, if there are no subheadings, near the bottom of the tab. Please note the option won't be available under "Layout" unless you're using Divi Booster 2.7.2 or higher. If you can't see the option the first thing to try is updating both Divi and Divi Booster to the latest versions.
This option lets you set a minimum height in pixels for your slider. As long as this height is larger than the height of your slide contents, this is the height your slider will be set to. Otherwise, the height of your slide contents will be used.
A separate height can be set on desktops, mobiles and tablets, by clicking on the mobile icon that appears to the right of the Height option when you start editing the height value. Divi doesn't show the mobile icon when the main (desktop) height setting is the default of 500px, but if you change this to something else (e.g. 501px), the mobile icon will appear.
The new Height option is available on standard sliders, post sliders, fullwidth sliders and fullwidth post sliders.
NB: While you should no longer need to deal with it, if you do set the built-in custom padding option on your slides, the Divi Booster feature will honor this and determine the minimum height of the slide to be the contents plus your custom padding. The Height option does, however, override the default padding as this allows it to achieve smaller sliders with no change in the appearance of the slide contents.
Option 3: Setting the Slider Height using CSS
If you want to set the height of a slider using CSS, you can do the following. First, give your slider a "CSS Class" such as "myslider" on the Advanced tab of your slider settings. Then add the following CSS to your site:
Related Post: Adding CSS to the Divi Theme
You can adjust the slider height to your requirements by setting the min-height values for desktop, mobile and tablet in the code above.
The Old Way: Setting the Slider Height Globally using Divi Booster / CSS
An older slider height option exists in Divi Booster, though I don't recommend using it any longer. You'll find this option on the Divi Booster settings page, under "Modules > Slider > Set default slider height". It sets a default slider height which applies to all sliders, and doesn't apply on mobiles / tablets.
Generally, you're going to find the new "Height" option added into individual modules to be much more flexible and convenient, so I'd always consider that as your first choice. However, I've retained the slider height option for now for people who are still using it or otherwise find it useful.
This option also used a slightly different (and less flexible) CSS implementation. This CSS doesn't handle the custom padding / positioning of the slide description as well as the new code, but here's the old CSS anyway, for completeness:
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
It worked for me..
This is perfect, thanks!!
Thanks! It Works! Can I set the slider height in percentage to the size of the browser window? I would like to show a full screen image without cutting it below, thanks and best regards
I found my mistake! "vh" instead of "%" 🙂
have a nice day
Great! You too, federico 🙂
My titles in the slider are too low now and not centralised in the vertical centre.
Hi Nathan, I've just released an update to this post / feature. The new CSS used keeps the slider titles properly centralised.
Thank you, Dan, for the code.
Works perfectly.
Hello Ryan. How to build a specific full width AND full Height for a mobile screen ? i.e. to get a full picture slider on a mobile phone as you can get on a pc using you code set to more than 700 pix in height: 750px !important; to let a tiny part of the rest of the page to let the people scrolling down. I try to find something similar to one of my pages I made using a single full size page header in a full page row : http://dev.digipicture.com/works/lascaux-30000-ans-une-boutique-par-usm/ please use the developer tools to resize the page because it's 2 different full size sliders called according to pc or tablet/mobile.
Thanks Chris
Hi Chris, I've just released an update (details in the post above) which lets you set a different height on mobile. It won't automatically detect the height of the mobile device, but you can do something like you say – make the height as big or a bit bigger than the main mobile devices you are targeting.
Can i use divi booster to change a single slider height?
Hi Nate, you can as of Divi Booster 2.6.4. Please see the post above for details.
Just installed version 2.6.4 and trying to change a single full-width slider height, but on the "Design" tab there is no "Sizing" subheading as the instructions above indicate.
Hi Jim, it looks like some older versions of Divi don't have the "Sizing" subheading so when the slider option is added to that subheading it isn't showing up. I've fixed this in the next version of Divi Booster 2.7.2 which I hope to have out in the next few days – in these older versions the option will show up under the "Layout" subheading instead (on the same tab). If you need to use it sooner, updating to the latest version of Divi should give you the Sizing subheading and thus the height option. Note that if you're on an even older version of Divi with no subheadings at all, the option should appear at the end of the list of options.
Hopefully that helps, but let me know if you still aren't able to find the option. Thanks!
How can I control the position of the button? Since I modified the height from the Divi default to 500px height, the button sits on the top of the frame rather than being centered vertically. Suggestions?
Hi Carlos, I've updated this feature to keep the proper vertical centering. If you need to, you can also use the "Custom Padding" option in the slide settings to adjust the height of the button (make the top padding bigger than the bottom padding and it will move down, and vice versa it'll move up).
Hey Dan, although the slider height change works on desktop, it doesn't seem to transfer to mobile.
Hi Ryan, at the moment the code above (and Divi Booster's implementation) restricts the height change to the desktop only and use the Divi default on mobiles.
This is controlled by this line in the code above:
@media only screen and ( min-width:981px ) {
Changing it to:
@media only screen and ( max-width:980px ) {
Would make the CSS apply on mobiles instead.
There isn't currently an option to apply the height on mobiles in Divi Booster. However, I'm currently working on a rewrite of the slider height feature. It'll allow for setting different widths on mobile and tablets, and be configuration on individual modules. I'm close to completing it and hope to have it released in the near future. Thanks.
Awesome! Thanks Dan! Luckily by just duplicating the sliders, adjusting the visibility ("disable on"), and setting the CSS classes differently this works perfectly. Thanks for the quick fix and I look forward to more improvements in the future!
Nice one 🙂
Thank you very much for the code. It works perfectly on the desktop. I changed the height to 600px. But when I look preview in Divi builder, it seems that tablet and phone also keep to 600px, though I copied your code completely. and on the phone it looks badly. My site is on the local server yet, so I cant check it on a real phone. Where can be the problem?
Hi Yevgenia, that code only applied on desktops with the Divi defaults being used on mobile / tablet. I've just updated the code to be mobile responsive. Please see the post for details. Thanks!
Thank you for the css, it worked perfectly.
Regards
WPFirm.com
Hello. It works on desktop, but it doesn't work on mobile or tablet. What could I do? TIA
Hi Chris, I've just released an update (see the post above for details) that supports mobile and tablets.
How do you get the divi booster full width slider height adjuster to work on smartphone? It works fine on desktop but leaves a horrible gap between slider and text below. Help!
Hi Tessa, I've just released a new, improved version of the feature which allows you to change the height on smartphones. The feature is available in Divi Booster 2.6.4 onwards. Please see the post above for details.