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

1. Copy the CSS code from the section above
2. Set a CSS class on your slider module (e.g. “my-slider”)
3. 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).
4. Add the CSS to your Divi Theme