R36: How to Control the Divi Header and Slider Height and Content Position

I am not sure why it has taken me so long to put this recipe together. After all, I see this question asked in one form or another at least on a daily basis in the Divi Facebook Groups.

Way back in 2016 I wrote this post on alternating left and right aligned fullwidth slider and this post on aligning the fullwidth slider text left or right. With all the updates, those are quite outdated now, and they didn’t cover the fullwidth header, standard slider or vertically positioning your content.

So in today’s recipe that is what I am going to cover. I will show you how to add a little CSS so that you can control the height of your module, regardless of the amount of content, and position that content at the top, middle or bottom.

There are a number of ways to control the height of your modules, and if you don’t want to change the way the content is aligned, then I would recommend you do this by adjusting the top and bottom padding in the module settings as this will make your module taller or shorter and it’s super easy to maintain, but if you need to control the content position completely, then read on

As everyone’s content will be different, you’re going to want to bring your own media queries if you want a different look on mobile. There may be some properies in the CSS it doesn’t appear are needed, but these are to compensate for IE’s poor flexbox support

So let’s get cooking!

Ingredients

The latest version of the Divi Theme from Elegant Themes.

An active child theme. You can add the CSS to Divi’s Theme Options but its not much fun editing it in there!

Cooking time

This should only take around 5 – 10 minutes per module.

Preparation

For the prep you just need to add the module (Fullwidth Header, Fullwidth Slider or Standard Slider) to your page and add in your content. That’s the title, subtitle, buttons and body content.

If using a slider, just add a single slide for now, once we have all the settings in place you can just duplicate the first slide and swap out the content.

Now jump to the method for the module you are using:

Fullwidth Header | Fullwidth Slider | Standard Slider

Fullwidth Header

Method

Open up the the module and in the Advanced tab, add a custom class of ds-fw-header, then save and close the module.

Now here is the CSS we need to add and what it is doing:

Firstly, we set the display of the header to flex, this allows us to position the content where we want it. The align-items property is what positions the content, flex-end will position the content at the bottom, flex-start at the top, and center in the middle.

We also remove the default padding which is what usually controls the height, and instead add a min-height and height value of 50vh, which is 50% of the screen height, and these are the value you want to adjust to get your header the height you want it.

.ds-fw-header {
    display: flex;
    align-items: flex-end;
    padding: 0;
    min-height: 50vh;
    height: 50vh;
}

Next we need to get rid of/change the spacing (padding and margin) Divi adds by default. First we set the container to be fullwidth and remove the padding.

Then we set the header content container to fullwidth also and decide our own padding value, I have chosen 2% here but you can adjust this to whatever you want. We then also remove the margin so that the content container spans the width of the screen.

This means that if you wanted to add a background colour to your content for example, you can do that and the background will span the width of your header and sit flush on all sides, depending where you have decided to align it. If you want a little space around, just add some margin back in.

.ds-fw-header .et_pb_fullwidth_header_container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.ds-fw-header .header-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 2% !important;
    margin: 0;
}

That’s all the CSS you need, unless you are using the fullscreen option in the settings.

If you have this option set to Yes, then you will want one more snippet:

.ds-fw-header .header-content-container.center {
    margin-bottom: 0;
    align-self: flex-end !important;
}

Again you can change flex-end to flex-start or center. It will be centered by default.

In the toggle below is the complete CSS for the Fullwidth Header with vendor prefixes and commenting, copy and paste into your child theme stylesheet or Custom CSS box in Divi > Theme Options.

Fullwidth Slider

Method

Open up the the module and in the Advanced tab, add a custom class of ds-fw-slider, then save and close the module.

Here is our CSS and what it is doing:

First, we set the slide container display to flex to allow us to position our content. Then we position the content using the align-items property. flex-end will position the content at the bottom, flex-start at the top, and center in the middle. We also set the container to fullwidth (default is 80% or 1080px maximum).

We then set the padding for our content at 2% but you can change this to whatever you want.

.ds-fw-slider .et_pb_slides .et_pb_container {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-width: 100%;
}

.ds-fw-slider .et_pb_slides .et_pb_slider_container_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2%;
}

Next we remove the default padding for the slides and set the min-height and height to 50vh, which is 50% of the screen height. This is the value you want to adjust to get your module the height you want it.

.ds-fw-slider .et_pb_slide {
    padding: 0;
    min-height: 50vh;
    height: 50vh;
}

And finally, we adjust the width of the content container, remove the margin (so it spans the width of the module) and the padding (we already set the padding in the container above). 

If you want to add a background colour you can do this here and also adjust the margin value to increase the space around the content.

.ds-fw-slider .et_pb_slide_description {
    width: 100%;
    margin: 0;
    padding: 0;
}

In the toggle below is the complete CSS for the Fullwidth Slider with vendor prefixes and commenting, copy and paste into your child theme stylesheet or Custom CSS box in Divi > Theme Options.

Standard Slider

Method

Open up the the module and in the Advanced tab, add a custom class of ds-reg-slider, then save and close the module.

Here is our CSS and what it is doing:

First, we set the display to flex to allow us to position our content, then we use the align-items property to position our content. flex-end will align to the bottom, flex-start to the top, and center to the middle.

Then we add some padding to create some space around the content. You can adjust this value if you want more or less space.

.ds-reg-slider .et_pb_slides .et_pb_container {
    display: flex;
    align-items: flex-end;
}

.ds-reg-slider .et_pb_slides .et_pb_slider_container_inner {
    display: flex;
    padding: 2%;
}

Next we remove the default padding for the slides and set the min-height and height to 50vh, which is 50% of the screen height. This is the value you want to adjust to get your module the height you want it.

.ds-reg-slider .et_pb_slide {
    padding: 0;
    min-height: 50vh;
    height: 50vh
}

And finally, we remove the padding from the description (we already set padding above in the container). You can add a background colour here if you want it and the content will be flush to the edge of your slider on all sides, depending how you have it positioned. If you want a little space around that, just add in some margin.

.ds-reg-slider .et_pb_slide_description {
    width: 100%;
    padding: 0;
}

In the toggle below is the complete CSS for the Standard Slider with vendor prefixes and commenting, copy and paste into your child theme stylesheet or Custom CSS box in Divi > Theme Options.

Note: These settings do not take into account the slider controls, if you have those switched on and have your content aligned to the bottom, you will want to add a little bottom margin so your content does not sit on top of them.

And that’s it! Now you have complete control of the height and content position of your headers and sliders

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X