Select Page

So, I was working on a client’s site today, and ran into a grind. I needed a 4 page slider at the top of the home page, but I also needed it to be fullscreen, so the user would land on the site, see a beautiful fullscreen slider scrolling by, and then scroll down to see the content they were there to see.

The recently released Divi 2.4 allows you to create fullscreen headers with background images, but no fullscreen sliders (hint hint to the devs at Elegant Themes). I poked around for a while trying unsuccessfully to find a Divi-based solution. I turned to googling for a pure CSS solution, and found one.

Super simple. Go to Divi > Theme Options in your WordPress Dashboard. Scroll down to the bottom of the page, and paste this code into the Custom CSS box:

.et_pb_slide {
height: 100vh;

Then add height: 100vh; to your slider module custom CSS section in your Divi builder, like this.

Screen Shot on 2015-08-20 at 19-23-37

BOOM! Your done. Now every slider on your site will be the height of the viewport. If you want to make it specific to a particular slider, just add some more specific CSS selectors to that. I used .home .et_pb_slide {...} for mine so it only effects the home page.