Blog

Full Height Section in DIVI

Blog

Full Height Section in DIVI

Full Height Section in DIVI

Anto Fernandez

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:

Full Height Section in DIVI

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!

Center Divi row in the middle of the screen

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.

Row Absolute position Divi

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

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Text over image in DIVI

Text over image in DIVI

Today, we're excited to unveil a simple yet powerful hack that can significantly enhance the legibility of text over image in Divi. This handy tutorial is part of our Divi Basics series, designed specifically for those who are just dipping their toes into the vast...

Responsive Font in DIVI

Responsive Font in DIVI

Responsive font in DIVI? Is that even possible? YES!!!! What is more, you can do it with any font type! So today we would like to tell you a bit about the Divi responsive font. We will show you how to adapt the font size to your screen, no matter if you look at the...

How to change the color of menu’s links in Divi

How to change the color of menu’s links in Divi

Divi is a popular WordPress theme that comes with a powerful page builder and a wide range of customization options. But it has some limitations and sometimes we need to add CSS code. In fact, we can edit from the back office the color's link, font-size, lettering...

How to change the order of the Divi’s columns in mobile?

How to change the order of the Divi’s columns in mobile?

Divi is a great builder with a lot of options available that will allow us to work on any web project. But sometimes it is necessary to use some CSS if we want to get the best result. In the example of this post we are going to see how to change the Divi column order...

0 Comments

Submit a Comment

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

Select currency
Euro
$ United States (US) dollar

Get 5€ Off now!

Register now and get free coupon code.

 Register Now