How do I create a section that fills the total height of the screen (full screen) in DIVI?

In this post we are going to show you how to create the sections that occupy the entire height of the screen. This is ideal for creating more visual webs, powerful call to action landings and websites where the images are the main focus. Learn how to create a full height Section in DIVI with us:

Our section will adapt to any screen, it doesn’t matter if you visualize it from a phone, laptop or even a bigger screen.

This is the effect that we will achieve:

As you can see, even if we change the size of our window the two sections occupy the entire height of our device and the rows maintain their vertical alignment. 

How do we get the section to always adapt to the height of our device?

It is simple, for this to happen we are using a measurement unit known as vh (Viewport Height). So this means that 100 vh corresponds to 100% of our device’s height. If you adapt your browser or if you use a smaller device, 100 vh will always be the total height.

This will be the first step:

As you can see we have added the property a value “ Min height” of 500 px. We will then ensure that even if the window is smaller than 500px, our section will have at least that height. Thi is very useful to avoid it collapsing in smaller devices such as phones on horizontal positions.

How do we align our content at the center of the screen?

By default our row will be positioned at the upper side of the screen, so let’s center it. In order to do so we are not going to use any margins or paddings. This will be an easy solution but also incomplete as the content won’t be centered nor will be adapted correctly on the device. Let me show you how to do it!

If we want our row to always remain at the center of the screen we are going to edit the following values. Let’s change the position of the row to “Absolute” and “Location” is in the center. This change will create the position of the element to always be at the center of the section. If you want to know more about the CSS Position, we suggest you read this post by Mozilla.

Full Height Section in DIVI Advice for your full screen in DIVI.

• This type of design is perfect for not much info or much text on a website.
• You can use other images for the background on mobile devices. It will adapt better.
• Use gradients as backgrounds to improve its legibility.
• Combine sections with a solid or gradient background to achieve more dynamism.

What do you think about this post? Does it seem interesting for your DIVI projects? Comment and subscribe to our list to get the best hacks and suggestions like this one in your inbox.

Full Height Section in DIVI | Destaca

Find everything you need to create with Divi

Divi plugins | Divi Themes | Divi Layouts

At Destaca Imagen, we bring your ideas to life with Divi. We create unique DIVI templates that transform your website into a visual and functional experience, tailored to your needs. Give your project the boost it deserves with our innovative and fully customizable designs. The future of your website starts here!