How to Remove White Space Below Footer in Divi Theme

Oct 10, 2020 | Blog, Divi Tutorial | 3 comments

In this tutorial I will share the steps to remove the white space below the footer in the Divi theme.

This issue happens when there is not enough content on the page. The less content there is on the page the more white space you will see after the footer.

Here is a screenshot of the issue just to clarify exactly what we are going to fix in this article and make sure it is not confused with another issue.

White space below footer in Divi theme

As you can see in the screenshot above I only have a Gallery on the page. The footer display right after the Gallery and after the footer there is huge white space.

This is how the Divi theme works by default. It does not pushes the footer to bottom if you have less content than the size of the browser window.

However the solution is pretty simple.

Add jQuery to Remove White Space Below Footer

To remove the white space below the footer, please go to your WordPress Dashboard > Theme Options > Integration > Add code to the < head > of your blog and then add the following code there.

<script>
jQuery(function($) {
    $(document).ready(function() {
        if ($('body').height() < $(window).height()) {
            $('footer').css({
                'position': 'fixed',
                'bottom': '0px',
                'left': '0',
                'right': '0'
            });
        }
    });
});
</script>

That’s it you are done. The code will automatically push the footer to the bottom of the page if there is not enough content to fill the entire page.

If you are not sure where to add the code in the Theme Options. Then here is a screenshot to help you.

Divi Theme Options jquery remove white space

What the code does is just compares the height of your browser window with the height of the content on the page. If the height of the content is less then the height of the browser window then it fixes the footer to the bottom.

Next you might want to check out the previous article on how to add 3 different hover effects to the Divi menu module.

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

3 Comments

  1. Amanda

    Hi! I’ve been trying to use this code but it doesn’t seem to work. The white space is still there. Any thoughts why it’s not working anymore?

    Reply
    • learnhowwp.com

      Hi Amanda,

      I have checked your website such as this link https://restoreace.com/services. And I can see that there is too much white space at the end of the page. This article is not written to fix the issue on your website. This article is specifically written for white space that is caused due to too little content on the page. You can see this in the first screenshot on the article. There is just on gallery module and then there is footer immediately after it and then below it there is white space.

      You should get in touch with Divi Support Team to check the issue further.

      Reply
  2. Aqeel Meo

    Hi,
    really great article about Divi and whole divi nation love your content.
    i need your help, i try to use this code, its only works only for few miutes, honestly its strange buts its hapen to me, i clear browser cache and try out what i can do, but now it is not working for me , can you help e please?

    Reply

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month