There are several issues that often arise when figuring out how to make a section fullscreen on any device, with the problem almost always being the height.

The main problem is that on some mobiles, the browser bar at the top is counted as part of the ‘viewport size’, meaning that no matter if the section height is set to 100% or 100vh (viewport height), the section goes over the bottom of the screen.

Another common problem, one you may be aware of if you’re a Divi user, is that a fullscreen module or fullscreen section will cause a jump when scrolling, particularly on mobile devices.

And then there’s just the problem of old or out of date browsers, as always ????!

When searching online, nearly all of the answers (that actually work) use jQuery which comes with its own compatibility issues, plus they don’t account for legacy browsers or for if the screen resolution is resized.

But don’t worry, we have the ultimate fix!

NOTE: This goes for all platforms and themes, and the code shown here can be used no matter what you’re using, but for the tutorials on how to add the code I’ll be using WordPress as the platform and Divi as the theme. Click here to get Divi from Elegant themes, the most popular theme and page builder there is. Most people (me included) believe it’s also the best by far! I use Divi for all of my websites, and always recommend that clients do the same.

How to make a section fullscreen on any device – a WordPress & Divi tutorial.

To make a section fullscreen on any device:

• Copy the JavaScript code below
• Add a CSS ID to the section that you want to make fullscreen
• Paste the JavaScript code to either a Code Module or Theme Options
• Replace the word ‘example’ with your CSS ID
• Save and clear your cache

It’s just a few lines of JavaScript, but don’t worry if you’re not familiar with adding custom code, I’ll show you several ways within this tutorial.

JavaScript code to make a section fullscreen on any device

Here’s the actual code:

<script>
    var Height, toResize, newHeight;
    // find the height of the browser window
    Height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // select the section to resize by id
    toResize = document.getElementById("example");
    // resize the section height
    function setHeight(el, val) {
        if (typeof val === "function") val = val();
        if (typeof val === "string") el.style.height = val;
        else el.style.height = val + "px";
    };
    setHeight(toResize, Height);
    // resize the height if the screen is resized
    window.addEventListener('resize', function() {
        newHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        setHeight(toResize, newHeight)
    }, true);
</script>

Simply swap the word ‘example’ for the CSS ID of your section (tutorials further down).

The first part of the code gets the height of the actual viewable portion of the screen by using the window.innerHeight property, as well as the document.documentElement and document.body clientHeight properties for compatibility with all browsers. The second part then resizes the section to exactly that height. The last bit of code detects if the user resizes their browser window using the window.addEventListener property, and resizes the section again if they do.

Clean, simple and portable!

Adding the code

Before adding the code, it’s best practice to first remove any other section-size code or settings that you have already added, leaving the section at its default size so that nothing is conflicting. If the above code isn’t working, the problem is likely that some other size setting for that section is overriding it.

Then you need to add a CSS ID to the section, telling the code what to resize.

How to add a CSS ID to a section In Divi

First, go to the page in question and click on either ‘Enable Visual Builder’ or ‘Edit Page’, and click on the settings icon (cog) for the section that you want to make fullwidth.

Then it’s probably worth quickly checking that all the ‘Sizing’ and ‘Spacing settings’ in the ‘Design’ tab are set to their default (you can always play around with these later if you need extra section padding etc).

Then go to the ‘Advanced’ tab, click on ‘’CSS ID & Classes” and add an ID name to the ‘CSS ID’ field.

e.g. makeFullscreen1

Click on the green tick, and then either the ‘Save’ button if you’re in Visual Builder, or ‘Publish’/’Update’ if you edited it on the backend with ‘Edit Page’ to save your settings.

NOTE: If the section that you are trying to make fullscreen is a Divi ‘Fullwidth’ section with a ‘Fullwidth Header’ module in it, then you want to do the above steps for the Fullwidth section, and for the Fullwidth Header module, go into the module settings (cog icon) and click on the ‘Design’ tab, then under ‘Sizing’ set the ‘Height’ to 100%, making the module fit exactly to whatever size its container is – the Fullwidth section!

Now we just need to add the code, and our section will be perfectly fullscreen on any device no matter what, with no jumping when scrolling, and no need to have different settings for different screen sizes!

How to add the JavaScript code in Divi

There are several ways of doing this, with the best way depending on:

• How many pages have a section that you want to make fullscreen (you can just add the same CSS ID name to as many sections as you want!)
• If you have a ‘Child Theme’ or not

If you don’t have (or have never heard of) a ‘Child Theme’, then it just depends on how many pages have the fullscreen section.

If you only have a single page with a section that you want to make fullscreen, the best way is with a ‘Code Module’ directly on that page, so the code is only being loaded when that particular page is being loaded. If you have several pages with a (soon to be) fullscreen section, then the best way is to add the code to the ‘Divi Theme Options’ so that it loads on all pages, and so that you only have to add it to one place.

Code Module (single page):

When editing the page, simply click on one of the grey ‘+’ icons to add a module (anywhere on the page, it doesn’t really matter where you put it, but I like to put it near the top, somewhere just underneath the section that I’m targeting)…

…and scroll down to the one named ‘Code’.

The module settings should automatically open, but if not then just click on the cog icon to enter settings. Then in the ‘Content’ tab, under ‘Text’, in the grey ‘Code’ box, copy and paste the full code (including the <script> tags). Don’t forget to change the word ‘example’ for the ID name that you entered into the CSS ID field!

Click on the green tick, save or publish/update the page, and you’re done!

NOTE: You may need to clear your cache to see the new settings take effect.

Divi Theme Options (multiple pages):

In your admin dashboard (when logged in on the backend), scroll down to the bottom and click on the ‘Divi’ tab on the left to enter the Theme Options.

Select the ‘Integration’ tab along the top, and scroll down to where it says:

“Add code to the < body > (good for tracking codes such as google analytics)”

The grey box next to it is where you should paste the full code (including the <script> tags). Don’t forget to change the word ‘example’ for the ID name that you entered into the CSS ID field!

Click on ‘Save Changes’ and you’re done!

NOTE: You may need to clear your cache to see the new settings take effect.

NOTE: If you’re looking for super-fast website hosting at great prices, click here. SiteGround has the fastest UK servers, excellent caching, automatic backups and updates, and a really great customer support team! I use SiteGround to host all of my websites, and always recommend SiteGround to my clients.

Child Theme:

For this method, you will need to add your code to the JavaScript folder named ‘js’ within your Child Theme folder. For the best tutorial on how to setup a Divi child theme, click here.

Create a file within the ‘js’ folder with ‘.js’ at the end – e.g., fullscreen.js

Paste the full code (but without the <script> tags!) inside that file. Don’t forget to change the word ‘example’ for the ID name that you entered into the CSS ID field!

Then you will have to make sure that the file is ‘enqueued’ within your functions.php file. To do this, you will need to add the following code to the functions.php file:

function mycustomscript_enqueue() {
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/fullscreen.js' );
}
add_action( 'wp_enqueue_scripts', 'mycustomscript_enqueue' );

Remember to change ‘fullscreen.js’ to whatever you named the ‘.js’ file within the ‘js’ folder!

Save the file and you’re done!

NOTE: You may need to clear your cache to see the new settings take effect.

So what’s next?

We understand that website design can be time consuming and confusing. We can help!

Click here to get in touch with us at Galaxy Online Services and one of our team will contact you back as soon as possible.

Did you enjoy this article about WordPress & Divi – How to make a section fullscreen on any device?

If so, please leave a comment below and share the link to this post, it really helps us out!