Changing the Height of the Divi Slider

The Divi Theme comes with a slider module to let you display a gallery of images. It has a fixed height, but this can easily be changed by adding some CSS to the Divi theme, in several ways:

Changing the Divi Slider Height Using Divi Booster

To change the slider height using my Divi Booster plugin, go to the Divi Booster settings page then go to “Modules” > “Slider”. There you’ll find the “Set default slider height” option. Simply enter your chosen height, save the Divi Booster settings and now your sliders will be set to your chosen height.

Manually Changing the Divi Slider Height

@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; 
    }
}

Note that this will change the height of the Divi slider on all pages with a slider – just change the two occurrences of “425px” with your desired height.

I’ve used “top: 25%” to display the slide titles 1/4 of the way down the slide (so that all slide titles appear in the same place). Increase this if you want the slide titles and descriptions to be moved lower down the slide.

Changing the Slider Height on a Single Slider

If you want to apply a change of height to a single slider, you can do so in the following way. in the following way

Copy the CSS code from the section above
Set a CSS class on your slider module (e.g. “my-slider”)
Replace each of the 5 occurrences of “et_pb_slider” in the CSS code with “my-slider” (be careful not to delete any of the periods or commas).
Add the CSS to your Divi Theme

58 Comments

Ryan on August 8, 2017 at 3:42 am

Hey Dan, although the slider height change works on desktop, it doesn’t seem to transfer to mobile.

dan on August 9, 2017 at 3:49 am
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.
Reply
- Ryan on August 9, 2017 at 10:41 pm
  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!
  Reply
  - dan on August 10, 2017 at 5:59 am
    Nice one 🙂
    Reply