Pst! I believe in transparency, so I wanted to let you know I use affiliate links to recommend products I love and use (or have used) in my own business. Links inside this post are affiliate links which help support this site at no extra cost to you.



I’m working on a client site this week and I’m going for a modern, almost futuristic design.

It’s important to me the header is eye-catching, so I wanted to make the header area — also known as the Hero area — full height with left aligned elements.

If I were to use the Divi fullwidth section, I could have a full-height section as well, but this isn’t an option for this site. To achieve left aligned elements, I have to use a standard section because the fullwidth section is one column, fullwidth across the screen.

This means I’m stuck using the standard section, but full height is not an option when you’re using the Divi standard section.

So what do you do?

This is one of those times when knowing a bit of code is useful even if you’re just a Divi designer.

The code I’m using here is one simple line of CSS, and here’s what you do.

Step 1: Define the CSS Class.

Open up the settings for your section and go to the “advanced” tab. There, define the CSS Class. I named mine header. Save and exit.

Step 2: Add this code.

Open up Divi Theme Options and down at “Additional CSS” add this line of code.

.header {height: 100vh;}

Save.

Step 3: Confirm it worked.

Open the page in a new browser tab and refresh to see the new full-height section.

Viola!

If you’re curious how this works, you’re defining 100% of the viewport height. This will ensure the section — regardless of device — will be full height.