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
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
/* === Begin: Set the divi slider height === */
/* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */
/* Desktop */
.myslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 980px) {
.myslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
}
/* Phone */
@media only screen and (max-width: 767px) {
.myslider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 500px !important;
}
}
/* Handle padding */
.myslider .et_pb_slide {
padding-bottom: 0px !important;
}
.myslider div.et_pb_slide_description,
.myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description {
padding-top: 1%;
padding-bottom: 1%;
}
/* === End: Set divi slider height === */Related Post: Adding CSS to the Divi Theme
The Old Way: Setting the Slider Height Globally using Divi Booster / CSS
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:
@media only screen and ( min-width:981px ) {
/* Set the slider height */
.et_pb_slider, .et_pb_slider .et_pb_container {
height: 425px !important;
}
.et_pb_slider, .et_pb_slider .et_pb_slide {
max-height: 425px;
}
.et_pb_slider .et_pb_slide_description {
position: relative;
top: 25%;
padding-top: 0 !important;
padding-bottom:0 !important;
height:auto !important;
}
}Setting the Slider Height on Mobiles
- Go to: Slider Settings > Design > Height
- Click on the "Mobile options" icon – this should bring up tabs for "Desktop", "Tablet" and "Phone"
- Click on the "Phone" tab
- Enter the height you want the slider to display on mobile devices.
- Save the Slider settings.
The location of the setting is shown here:
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
Great Plugin! I love doing full page sliders. Your plugin fixes everything in seconds!!
Thanks Amandeep! :)
Super plugin ;)
Ces options manquaient vraiment à DIVI qui était déjà très complet.
Un grand merci :)
Merci Xavier :)