Body is overlapping footer - but not on all pages?

Design help General
1

New to webflow, but been doing web work for many years - just time to get myself on a platform that supports mobile w/o too much hassle! :slight_smile:

I found this topic already answered a couple places but those answers don’t seem to apply - wondering if anyone can point me in the right direction. The ABOUT page seems to be the only one working correctly with the BODY not overlapping the footer, both in the editor and in the published page – but I can’t for the life of me figure out what I did differently on that page! Any help is appreciated!

THANKS!

Here’s the read-only link - https://preview.webflow.com/preview/smokeone?utm_medium=preview_link&utm_source=designer&utm_content=smokeone&preview=4d7fbe70aacc2dfd7d6fba8bcfa5531f&pageId=5f558ccf3b14dd02629f5c5d&mode=preview

2

Welcome to the community @SamReynolds!

The issue here is that your Footer symbol is not included at the bottom of the Navigator stack which controls the document flow on the front-end.

image

If you wanted to ensure the Footer remains on top regardless of where it is in the document flow you could simple set it to position: relative and adjust the z-index to a high number—however keep in mind this will hurt accessibility as users navigating with screen readers would see your footer content before your body content.

The easy solution is to make sure your Footer symbol is always shown at the bottom of your Navigator stack, which fixes the problem of body content rendering above it:

image

image

1 Like
3

THANK YOU!!! I knew it was going to be something SIMPLE that i just hadn’t learned yet, but i also knew that it would take me FOREVER to find it! I was looking at all the positioning stuff and completely missed the whole navigator menu - that helps a TON.

Really appreciate it!

1 Like
4

No problem, glad I could help out :v:

1 Like
5

Hi @mikeyevin,
I am having a similar issue with the mobile version of my site, where the footer on the ‘portfolio’ page overlaps with my main content. I’ve tried some of the solutions on other threads on the forum for this issue, and my footer page symbol is already on the bottom of the list in the navigator, so I’m a bit stumped! Can you see anything causing this? Thank you

https://preview.webflow.com/preview/the-berg-design?utm_medium=preview_link&utm_source=designer&utm_content=the-berg-design&preview=91c9062ddd3222d634b69dca1276b6da&pageId=5fe5f44a305f86b068e4a8b7&mode=preview

6

@thebergdesign - The reason you’re seeing the overlap is because you’ve got a set height applied to your Project section element which is limiting the height of itself to the viewport height of the device:

image

Changing the height to Auto on smaller screens should fix the issue :+1:

7

@mikeyevin Yes! That worked perfectly, thank you for solving that :ok_hand:t2: I want to mark it as a solution but the button to do so isn’t showing on my end.

1 Like