Code by Day | Explore By Weekend

How To Make A Full Height Divi Hero Section Tutorial by Pee-Aye Creative

How To Make A Full Height Divi Hero Section

This quick Divi Pro Tip will show you how to easily set your Divi hero section to be full height on desktop, tablet, and phone.

You can create a full height section two ways in Divi. In the past, the only method was with a simple CSS snippet, but now there is also a way to do this directly in the Divi Builder. This tutorial will show you both method in case you need one or the other depending ont he situation.

Make A Divi Section Full Height With The Sizing Settings

Go to any Divi Builder section settings to the Design tab. Go to the Sizing toggle and find Min Height setting. Set the min height value to “100vh” and save the change.

set a Divi section to full height in the Divi Builder

That was easy! Now your hero section will be the same height as any device that your website visitors are using, whether that be desktop, tablet, or phone. 

Make A Divi Section Full Height With CSS

The althernative option involes just one line of code which needs to be added to the section that you want to be full height.

Go to the section settings to the Advanced tab. Go to the Custom CSS toggle and find the Main Element. Copy and paste the following code snippet below into that input area.

min-height: 100vh;
set divi hero section full height

There you go, that is two methods to create a full height hero section in Divi. I hope you enjoyed that and can put it to good use on your Divi websites!

25
Last updated Jan 3, 2021 @ 1:41 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Gabriele Maria Fonck
Gabriele Maria Fonck
8 months ago

Is it also possible to make a 100vh of 2 sections? I would like to use the header image and a nav-menu-bar underneath, to display this 100vh/fullscreen

Joe Jackson
Joe Jackson
5 months ago

This is great – thank you. My section has a margin of 20px (could be a white border) which is fine apart from the bottom margin. This always shows beneath the bottom of the screen. Would there be a way to show the bottom margin on the screen? Thanks 🙂

Joe Jackson
Joe Jackson

Hi Nelson, it’s a little hard to explain – apologies. I have attached a screenshot of the issue. The margin exists on all sides of the section, however it doesn’t show on screen at the bottom – you have to scroll down to see it. I would like it so the bottom margin shows on screen – so the page has a nice border effect on all sides. I hope that makes sense!

Dan
Dan
2 months ago

Hi Nelson, thanks for the tip! I have just one question: is there a way to dynamically subtract the header height to the 100vh so that the hero section considers the menu? I made a couple of different global headers for the website which differ in height and I’d like to use an hero section with video with both menus.
Thanks for any suggestion,
Dan

Dick Ockers
Dick Ockers
5 days ago

Thank you again dear Nelson to provide a solution to my problem! AGAIN 🙂

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart