August 1, 2021
3 mins

How to create full-height & width sections in Divi with one simple code.

Screenshot from Trident Record’s Website (client of ours)

If you want to create responsive full height & width sections in Divi you’ll want to use this one simple code.

First, go into the sections that you want to make full height and full width. You’ll want to create a section to work with first. See example below:

This will work with Regular sections and Specialty sections as well if you’re just concerned about the height of the section being 100% on any screen size so don’t worry…You don’t HAVE to use the Fullwidth section to use this code or method.

After you’ve got your section, you’ll want to add all of your content. In this case, ours looks like this:

You can see that the Hero Section is looking good but on this particular laptop screen the Hero Section doesn’t cover the entire screen upon load. You can see where we’ve highlighted the exposed second section in green.

Now, watch what happens after adding this simple code to our Custom CSS section of the Hero Section up top and how much better it looks…

The Hero Section now takes up the entire height and width of this screen size along with any other screen size a person may view your website on.

It’s completely responsive.

So how did we do it?

First, click on the settings section of the particular Section you’re trying to add the code to.

Go to Settings → Advanced → Custom CSS

You should see this:

Enter the following code into the Main Element section like so:

height: 100vh

Click the green check to and then save your page as usually, so the change takes effect. Refresh your page in a new tab, and you should be good to go!

Want help building or changing your website? Contact us. We're always happy to help!