Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Make A Full Height Divi Hero Section

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

46 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) <span class="comment-author-role-label author-label">Author</span>

        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
      • 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) <span class="comment-author-role-label author-label">Author</span>

        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
  15. Sebastian

    Hi Nelson,

    i use the Hero Section of Divi to get a full screen section. On mobile devices i discovered a bug, that i’m not aware of repair by myself. The hero section on mobiles seems to be to big for the actual screen. I tried the methods you guys recommended, but unfortunately couldn’t get it fixed.

    https://plastischechirurgie-hamburg.com/leistungen/gesicht/facelift/

    This is example page. We got the problem on all our pages.

    Thanks in advance

    Reply
    • Hemant Gaba

      Hi Sebastian!

      Please add the following code for the tablet and mobile view using Divi responsive design option:

      min-height: auto !important;
      height: 80vh !important;

      Let me know how it goes.

      Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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
  16. 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
  17. 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
  18. Christofer

    Hello! Great post!
    I had a funny thing happening.
    i made a whole section, where 42% of it was an own section to the left (full page header)
    Made it a nice overlapping view.

    When adding 100vh to the “bottom” section in min height, it added a spacing below my page header BUT when i took 100vh in both min height and Height, it all worked.

    And another funny thing
    The same problem happend in the mobile device/ipad section, but here the problem switched to the full page header instead making me add 100vh to both min height and also Height.

    Reply
    • Hemant Gaba

      Hi Christofer!

      It seems some extra margin or padding were involved in the section. Please try adding min-height 100vh without any extra spacing value. If the issue still happens, can you please share the URL of the page to check further?

      Reply
  19. Hans

    Hi,

    How can i increase (with CSS) the high of a footer section

    There is no section-menu ( i use DIVI).

    Thanks for your reply.

    Hans

    Reply
    • Hemant Gaba

      Hi Hans!

      It seems you’re using the default footer for the site. If yes, then add the following code in Theme options > Custom CSS:

      #main-footer{
      height: 50vh;
      }

      You can also create a custom header in theme builder.

      Let me know how it goes!

      Reply
  20. Dan

    Hey Nelson, I used the 100vh on my hero slider module and it looks great on desktop, but when I went to mobile, the slider is elongated and super tall.

    I then found this code and put it in

    @media screen and (max-width:900px)
    {
    .et_pb_fullwidth_slider_0 .et_pb_slide {
    background-size: contain!important;
    height: 250px !important;
    }

    }

    @media screen and (max-width:479px)
    {
    .et_pb_fullwidth_slider_0 .et_pb_slide {
    background-size: contain!important;
    height: 110px !important;
    }

    }

    And the slider looks great now on mobile BUT it still has the 100vh attached to it so there’s black above and below the slider on mobile.

    Here is the screenshot https://snipboard.io/ptNvxf.jpg

    Reply
    • Hemant Gaba

      Hi Dan!

      Please avoid using 100vh height and the above code when used fullwidth modules already. The fullwidth modules adjust the height itself to fullscreen on desktop and mobile.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart