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.

This quick Divi Pro Tip is very easy to implement. It 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

That’s it! 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. Hope you enjoy!


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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Gabriele Maria Fonck
Gabriele Maria Fonck
2 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

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Would love your thoughts, please comment.x

Pin It on Pinterest


Your Cart