How to Remove White Space Below Footer in Divi Theme

Oct 10, 2020 | Blog, Divi Tutorial | 0 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.

0 Comments

Submit a Comment

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

Affordable Web Hosting With Great Customer Service

Starting At Just $1.44/Month