Published May 18, 2024 • Divi / WordPress

The Problem

By default, Divi's fullwidth slider is way too tall for most text-based applications. You get this massive slide with a tiny amount of text floating in the middle.

Divi doesn't have a built-in height control, so you need to use CSS. Here are three ways to do it.

Method 1: Child Theme or Additional CSS (Recommended)

This is the best method because it gives you full control over desktop, tablet, and mobile sizes separately.

Step 1: Add a Custom CSS Class

Edit your fullwidth slider in the Divi builder. Go to Advanced → CSS ID & Classes and add a custom class. I'll use "homeSlider" for this example.

Don't add the period. Just type homeSlider, not .homeSlider. Divi handles that part.

Step 2: Add the CSS

Put this in your child theme's style.css or in Appearance → Customize → Additional CSS:

/*-------- 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----------------*/

Adjust the Values:

• height: 37px - Change this to make the slider taller or shorter
• max-height: 37px - Should match the height value
• top: 8px - Adjusts how far down the text sits from the top

You can uncomment the tablet and phone media queries to set different heights for different screen sizes.

Method 2: Use Divi's Built-in Custom CSS

Divi has a Custom CSS field in Divi → Theme Options → General → Custom CSS. You can paste the same code from Method 1 there.

This is convenient if you don't have a child theme set up.

Method 3: Add CSS Directly in the Builder

You can add custom CSS directly to the slider module without touching any theme files.

Edit the fullwidth slider module, go to Advanced → Custom CSS, and add this to the different fields:

Main Element field:

height: 60px;
width: 100%;

Slide Description field:

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

Limitation:

This method doesn't let you use media queries, so you can't set different heights for different screen sizes. My suggestion: hide the fullwidth slider on mobile if you use this method.

To hide on mobile, go to Advanced → Visibility and disable it for phone and tablet.

Which Method Should You Use?

Use Method 1 if you need responsive control (different heights on desktop, tablet, mobile).

Use Method 3 if you just want a quick fix for desktop-only sliders.

Avoid Method 2 unless you're already using Divi's theme options for other custom CSS.

Why This Is Necessary

Divi should have a simple height slider built into the module settings. Instead, you need to write CSS and hope it doesn't break when the theme updates.

This is one of many reasons I stopped building WordPress sites. Too much time fighting with the tools instead of just building websites.