I keep seeing questions like how do i change the Divi Theme Slider Height? or how do i set the height of the Divi Theme Slider? in the various Divi Theme Facebook groups so here is a quick bit of custom CSS you can add to your theme options custom css box or into your child theme to control the height of your slider. If you don’t yet have a child theme or know what a Divi child theme is it is worth learning what they are and in what situations you may need one.

How to change the Divi slider height

To set the height of your Divi Slider you will need to do one of the following things;

/* Set the slider height */

@media only screen and (min-width:981px) {
    .et_pb_slider, .et_pb_slider .et_pb_container {
     height: 600px; /*edit your height here*/
    }

    .et_pb_slider, .et_pb_slider .et_pb_slide {
        max-height: 600px; /*edit your height here*/
    }

    .et_pb_slider .et_pb_slide_description {
        position: relative;
        top: 20%; /*edit to fit your height here*/
        padding-top: 0 !important;
        padding-bottom:0 !important;
        height:auto !important;
    }
}

This will effect all sliders, so unless you have just 1 slider or want them all the same height you may want to add a CSS class into the specific slider module. Then change the code above from “et_pb_slider” to the CSS class you just added to the module.

This code is originally from Dan Mossop who created the Divi Booster plugin, which offers an easy way to apply this and many more customizations to your Divi theme.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close