fbpx

Web design made easy.

Design + Tech Tips for WordPress and Divi.

How to expand your Divi standard section to full height with one line of code

by Jan 24, 2018Code Snippets, Web Design

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.

16 Comments

  1. elkp32

    Lifesaver! This is awesome. Thank you!

    Reply
  2. Julio Cibrian

    Thank you! The only way to make a full height section was using the full width header module but that limits divi’s potential so much! This quick fix worked great!!

    Reply
  3. Julio Cibrian

    Thank you so much for what you share!

    Reply
  4. trafficinbound

    Sorry i didn’t work. I have added the header class on the section and also added the css code you mentioned on the divi editor on the dashboard. It didn’t work. You can check my site for proof

    Reply
    • Ysmay

      Did you put it in the CSS editor for that particular section?

      Reply
  5. gflgarden

    How can you center your content (vertically and horizontally) in that fullscreen section though? Thank you!

    Reply
  6. Bazares onLine

    Hi Ysmay, do you know a way to add top and bottom scroll links?

    Reply
  7. Camilo

    Excellent. Thanks so much posting this helpful hint. Exactly what I needed.

    Reply
  8. oscarcanol

    Simply awesome!!!!
    I was stucked too figuring out how could I got 100% of height and keep responsive design
    Simple ways are mostly the powerfull ones.
    Thanks a lot, greetings from Spain

    Reply
  9. nicuconstantin

    Hi There! Thanks for the idea
    i tried this.. because i also would like so much to use regular section as a fullscreen heigth.
    Tried your idea … but it’s not working on mine- should be becouse i’m using it combined with other full width header on the same page?
    I will apreciate any help!
    Thanks

    Reply
  10. Daniel

    thanks, just what I needed

    Reply
    • Ysmay

      Super! Glad it helped!

      Reply
  11. Manuel Dingemann (@erstersinn)

    Thank you so much. This is briliant 🙂
    I believe you could also type “100vh” in the ‘Min Height’ property within the ‘Design’ -> ‘Sizing’ settings of your section. That worked for me. Thanks again for the inspiration and short explanation!

    Reply
    • Ysmay

      Yes! You can also use 100vh in the CSS settings for the section. But then the menu items and headers reappear when scrolling. 🙂

      Reply
  12. Anita Martin

    This is so amazing – saved me a lot of time (and hair haha) Thanks so much.

    Reply
    • Ysmay

      LOL! You’re welcome. 😀

      Reply

Leave a Reply

Super Helpful Posts

About Ysmay

Ysmay has been building websites professionally since 1999, and is the co-owner of Agency 109.

When she’s not building websites, she can be found mentoring fellow designers, playing Pokemon Go, and listening to gangsta rap.

You can connect with Ysmay futher on her personal site Ysmay.com