(980) 432-3578 georgeyoungnc@gmail.com

I am working on a system for a client that will take WordPress sites to create a presentation platform for a specific industry. In doing so I found that fullscreen divi rows where the way I wanted to go. One problem, fullscreen row in Divi is only available in a fullwidth Divi row. This posed a HUGE problem for me, I was not able to achieve the design I wanted to.

So as usual in my rush to find a solution I opened up Divi and began looking for ways to achieve fullscreen on any type of row fullwidthspecialty, or regular rows in Divi. I found a nice way as usual when it comes to Divi.

Step 1: Setup a Custom CSS Class

Open the settings for the row, go to the advanced tab. From here create a custom class, I named mine fullscreen-row.

Save

Step 2: Add some CSS Code

Go to the Divi Theme Options and go to the “Additional CSS” section on the left hand navigation, it should be all the way at the bottom. Unless you have customized the customizer.

Now enter the following at the bottom of Additional CSS:

.fullscreen-row{ height: 100vh; }

Save

Step 3: Make sure it works!

Open the page in a browser window and see your new full-height/fullscreen section!

By defining 100% for the viewport height ensures the section, regardless of device will be the full height of the screen.