I have built a site with a master footer. One some of my pages there is extra white space (maybe 150-200 px) below the footer, even though there are no design elements or sections below it. I have compared every setting I can find between pages where there is extra space and where there is none.
This does not seem to be an issue of only very short pages getting extra white space at the end, as one or two of them are quite long.
Is your footer fixed to the bottom? If not, then you need to make sure that the content grid is set up to conform to the height of screens. For example, the height of the header, main content, and footer should equal 100vh.
i.e.
header 10vh
content 80vh
footer 10vh
or how ever you want to break it down to best suit your layout. Pixels work, and if fairly short, then I am fixing it to the footer so that it is always at the bottom.
Thanks for the reply! Don’t think I want to set the viewport height, as I want longer pages to scroll. Header and Footer are fixed pixel heights. But regardless, this doesn’t seem to explain why it looks correct on most pages, but not a few others.
I would give the content section a min-height at least. That way if you have less content, the footer will remain more to the bottom.
header (ie 100px)
content min-height 80-90vh*
footer (ie 150px)
You willl have to play around with it as pixels don’t adjust to screen’s view ports.
But you do understand that this happens on very long pages as well, that scroll well past multiple viewport’s worth of screen?
Do you have any bottom padding or margins at the footer or content within the footer? Something is below it. Is it the same distance on all pages?
@teejay absolutely nothing below, and no padding or margins. pages are all different lengths.
you can see the extra space below the footer above (in edit page mode, but it also shows in preview and published page). In the layers, you see nothing else is below it, and there is no padding of any kind.
in both cases there is lots of scrolling content above.
Here’s one interesting thing I notice. On the first screen shot, there seems to be the ability to add a new section below the footer (you see the blue plus sign). On the second screen shot where the footer is all the way at the bottom, I cannot add a new section below it.
Can you share a link and maybe screen shot of the editor with focus on that footer, please?
@teejay I shared screen shots in my replies above. Did you miss those or was there something different you would like to see?
Did you find a solution to this problem? I have the same issue on one of my pages as well. Can’t get rid of the whitespace below my footer.
I’ve just had the same issue that was only showing in Safari.
I tracked it down to a button I had inside a container that appeared in several places on my site. The container had a fixed pixel width but the height was set to auto. Once I changed the height to a fixed pixel it sorted the extra space at the bottom.
Hope this helps
I think I´m going crasy. I have the same issue and I don´t find anything. Why do they make it so hard??? A white footer that doesn´t go away and I need to sit for hours try to fix it when I´m finnished with the rest.
I will forward that feedback and I believe the team is working on tools to help find overflowing content and elements. There can be quite a few things that could be the cause like grids larger than the sections, overflowing elements but feedback is here.
I came here with the same problem and I just found a solution that worked for me so far. I clicked on the Footer, selected Height, and set it to Auto. See the screengrab below… hope this helps.
@carl-nord1 Thanks to Buck Bowen for bumping as well but wanted to mention that there is a tool to find overflowing content with the site checke r now.
