Older Divi Slider Height: Start With the Content, Then the Controls

Published May 18, 2024 • Divi / WordPress

Updated 2026-09-30

How short can this Divi slider be without cutting off its message? Start with the longest slide, then adjust sizing.

A shallow banner can suit a brief announcement. A heading, paragraph and button need more room. I'd decide what belongs inside before forcing a height onto it.

Try the Sizing Fields First

The Fullwidth Slider guide lists Sizing under Design. Min Height, Height and Max Height do different jobs. Check which fields your builder provides.

Record the original values before changing them. Test the longest text and each slide's links at the widths people actually use. A tidy first slide doesn't settle the others.

I'd also look at the padding around the text. Less empty space may be enough. Hiding useful words to meet a chosen height doesn't help the reader.

The Earlier Class-Based Example

The original example names the module class homeSlider. The class field takes that name without a dot; the CSS selector includes the dot.

The sample below comes from the older guide. Its active desktop rule begins at 981px and forces 37px heights. Those numbers aren't suggested sizes for your slides.

/*-------- HomeSlider height adjustment ----------------*/
/*------------- Single Line slider----------------------*/
/*-------- Edit the height px to change height ---------*/
@media only screen and ( min-width:981px ) {  /*---Will only affect desktop view---*/
/*---@media only screen and ( min-width:768px and max-width:980px ) { ---Use for tablets----*/
/*---@media only screen and ( max-width:767px ) { ---Use for phones----*/

    /* Set the slider height */
    .homeSlider.et_pb_slider,
    .homeSlider.et_pb_slider .et_pb_container {
        height: 37px !important; /*---Edit the height #px to change height---*/
        width: 100% !important; /*---Adjust width here---*/
    }

    .homeSlider.et_pb_slider,
    .homeSlider.et_pb_slider .et_pb_slide {
        max-height: 37px; /*---Edit the height #px to change height---*/
    }

    .homeSlider.et_pb_slider .et_pb_slide_description {
        position: relative;
        top: 8px; /*---Text distance from top sometimes better to use percent.---*/
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
    }
}
/*-------- HomeSlider Height Adjustment End----------------*/

The tablet and phone parts are comments, not complete rules ready for use. The tablet query has a syntax fault. It needs fixing before those rules are enabled.

A 37px maximum can clip content. Check wrapping, buttons and navigation after any adjustment. These archived selectors haven't been verified here against a current Divi 5 installation.

The Earlier Module-Field Examples

The old Main Element example used the declarations below. They belong to a matching element's declaration field, rather than a stylesheet pasted without a selector.

height: 60px;
width: 100%;

The accompanying Slide Description example changed position, spacing and height:

position: relative;
top: 0px;
padding-top: 15px;
padding-bottom: 0;
height: auto;

Field names and valid CSS depend on the builder version. The vendor guide separates Module Elements from Free-Form CSS. Check the field type before pasting either sample.

If you use a theme stylesheet or a supported Customizer CSS field, keep the change scoped to the intended module. Check other pages for unintended effects.

Choose the Smallest Useful Change

I'd keep built-in sizing if it leaves room for the text. Use extra CSS for a clear need, and save the old settings so you can put them back.

My platform guide explains a separate decision: who should handle future edits. Changing a slider doesn't mean the whole site needs rebuilding.