** Update Divi 2.6 – You can add a height for your slider directly into the modules custom CSS tab. Just add height: 600px; into the main element section **

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, to set the height of your Divi Theme Slider you 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.

Comments

comments

Pin It on Pinterest

Share This
Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!