How to Remove the White Space below the Footer in Wordpress Site using CSS

Question

I have my site here. I am using a wordpress WOO Theme named Canvas. I can't figure it out how to remove the whitespace below the footer.

This is a screen shot of the issue.

Q: What is the easiest way to remove the space using CSS that conforms with the website standards?

Answer 1

The extra spacing is caused by the clearfix on #footer.col-full:after You can fix it with overflow:hidden on #footer.

Answer 2

This error occurred to me as well when creating an elemetor footer in wordpress where I was running Astra theme with it's theme customizer I had already put a simple text footer via widget option. Then I decided it is time to have a proper customized footer via elementor header and footer blocks so once I created this footer usually there is no error but this time there was a big white space below the footer in wordpress site.

Solution was to go to footer page and click edit with elementor and then click all sections in my footer and in layout under edit section find the option called overflow and then from drop down select as hidden repeat for all sections in footer and click update after done. And viola big white space gone finally:)

Answer 3

find you code on .footer you code will be like this,

border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999;

replace this code with this one,

border-bottom: 1px #4C4C4C solid;
background: #333;
color:#999 !important;
overflow: hidden;

this helped mine. hope for you too guys..

Answer 4

I was having an issue where the footer would not sit at the bottom of my page correctly.

This is my first WordPress site, and may not be the "correctly accepted" fix among senior developers, but for me all I did was one CSS rule of:

body {
   height: 0px !important
}

To give me this result

Answer 5

elementor answer to white space above and under footer. in my case it was white space in the section after i inserted a footer template into the section... i spent hours messing around with template css and section css and padding etc. turns out , it was the column in the section.

all i did was to click padding to enable individual control over top, botton left, right and that instantly got rid of the white space...

its a joke how many hours i lose bug fixing elementor. hope this helps somebody. elementor need to stop blaming plugin and template issues. its normally bad ux on their part.

Answer 6

Finally got it..

Just remove this:

#footer {
    padding: 10px;
}