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!

Last updated Nov 15, 2022 @ 7:20 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

38 Comments

  1. Gabriele Maria Fonck

    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

    Reply
  2. Joe Jackson

    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 🙂

    Reply
      • 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!

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Joe,
        I had to get the url from the screenshot. Links are always the best way to help. So just use this code and you will be all set: min-height: calc(100vh – 40px);

  3. Dan

    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

    Reply
  4. Dick Ockers

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

    Reply
  5. Sean

    what is the image size that you used? can this section be turned into a slider as well, or will this work with the full width slider section? thanks for the great tips

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Sean, I would recommend 1920px wide for the hero section background image. And yes, you could use the slider module if you want make it full height.

      Reply
      • Sean

        Thank you for your reply!.

        what about image height?

        i have been using 1920×1230

        for some reason my images are fitting perfect on widescreen pc (using 100vh), but are slighlty longer on some devices like my macbook and samsung phone. (eg i have to scroll down a tiny bit to make it fit the screen perfect)

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Sean,
        Typically the aspect ratio is 16:9, so 1920×1080 would be that. But remember, there is no perfect size or aspect ratio as every device is different.

  6. Scott

    Do you have any idea why when I make it 100vh it makes my section bigger than my current window?

    Reply
  7. David Reid

    I added a standard section, added a image to the background of that section. In that section I added a text module and a button module. I followed your tutorial and made the section hero section full height. Now the text module and button module has been pushed up. How can I make the modules inside that section centered? It also happens in your video as well.

    Reply
    • Hemant Gaba

      Please go to the Section Settings > Advanced > Custom CSS > Main Element and place the code given below:

      display: flex;
      justify-content: center;
      flex-direction: column !important;

      Let us know how it goes. 🙂

      Reply
  8. Jess

    This tip changed everything. Thanks a bunch!

    Reply
  9. Chad

    This worked perfectly for me! Thanks!

    Reply
    • Hemant Gaba

      We are glad that the problem is resolved now. 🙂

      Reply
  10. Lawrence Morgan

    Hi – Thanks for the fix. But…only works first time! I refresh the page and it shrinks back! Could you help?

    Reply
  11. Tania

    Hi Nelson,

    Thank you. I’ve tried this but the image always ends up way bigger than the size of the screen. Is there a way to make the section the exact same size of each screen size or is that totally impossible?

    Thanks!

    Tania

    Reply
    • Hemant Gaba

      Hey Tania,

      It is not impossible to make the section the exact size of the screen. Could you please share the URL so that I can check where you are facing the issue?

      Reply
  12. Giggs

    Hi,

    In my section I have a full width title followed by a menu module at the end that always ends up on underneath my page view. I seems it can not fit the view height perfectly. What am I doing wrong

    Reply
  13. Soren

    When I put this code it does make the hero section height of the browser…. but it starts after the menu so it is like Menu 96px + 100vh

    I see you write this earlier which I think would solve it
    min-height: calc(100vh – 40px); in my case
    min-height: calc(100vh – 96px);

    But where to put that code. I tried in the section custom CSS -> Main-> but it didn’t do anything

    Can you explain where to put this code… and should there also be min-height 100vh in the size section?

    Reply
    • Hemant Gaba

      Hey Soren,

      You can place the min-height code in Custom CSS > Main but I guess it’s not working for you because the subtraction sign is not right. Could you please copy and paste the code given below and see if that helps?


      min-height: calc(100vh - 96px) !important

      Reply
  14. Ryan

    Hi,

    Is there a way to have my hero section cover my top WP navigation area? I’m wanting to use the full height section to cover the whole website so the user will have to make a selection before continuing the the website and accessing the content.

    Thanks!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      There are lots of ways to center content vertically and a lot of other tutorials out there for it, so I won’t get into that here since there are many scenarios, but you can check the Elegant Themes blog.

      Reply
  15. Martin

    Hi Nelson,
    Creating this site where I’ve made a custom post type with a Gallery field (ACF Pro).
    Since Divi cannot do custom post type for the gallery slider .. do you have any idea on how to sort this out?

    This site I’m building is a site where I don’t want the customer what so ever to work in the builder in which I’ve got custom post types for every text field on the site connected to specific locations. But, this one with a gallery slider seem to be tricky.. any ideas?

    Thanks

    Reply
  16. Martin

    Hey Nelson,

    Working find on desktop.. but on mobile my arrow at the bottom of the section is a little bit further down. Don’t get why…

    Any idea?

    Thanks!

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart