Anchoring Issues On Mobile When Published

Hello,
I’m new to the webflow community and a newbie at best with zero experience. I have an issue with the mobile side of positioning and layouts not anchoring or staying close together.
I’ve tried it on the desktop version published and that is not the problem (use Win10, Browser Google Chrome) But when I check the mobile version (with iPhone 8, Browser Safari) There are two sections that stand out.
The footer doesn’t seem to be anchored to the bottom of the page and a bit of my Contact Section where I placed the mission statement seems to be spaced to terribly far away and almost close to overlapping other content.
I’ve tried looking at past forum posts to find the solution (change positions to static, played with the margins and set everything to auto) and all the things I’m trying doesn’t seem to work.

Here is what it looks like on the mobile version:

Any and all help are really appreciated, Thank you!
…(It’s like pulling teeth for me at this point!)


Here is my site Read-Only: Webflow - Aesir Drone Service

Hi - The reason for layout issues on mobile is partly due to the grid layout you are using - which is in some cases 12 columns wide on mobile view, this is not necessary. Consider using a single column for mobile - or use flexbox as an alternative. Perhaps check out the Webflow Flexbox vs Grid tutorial on Youtube to get an idea on some layout concepts. Hope this helps!

1 Like

Thank you @craigb !! It helped getting the one section to not overlap. One problem solved! :yum:

Now I’m stuck dealing with the excess bottom of the page and the footer not anchoring… :confused:

Hi - I can’t replicate this issue at my end. The H2 elements used in the footer have a max width of 1000px and a max height of 100%, this could be causing the issue. It could also be the navbar that is placed in the footer - as when opened it will dropdown below the base of your page. Try adjusting both of these elements.

Hello and thank you for helping @craigb, I’ve tried to fix that but that didn’t work…
I even got rid of the navbar too… Not sure what else to do now on that. I even changed some of the grids.

Perhaps try removing your ‘smooth-wrapper’ and just place everything inside the body.

It helped getting the one section to not overlap. One problem solved!

snaptube vidmate
1 Like

Thank you so much for helping @craigb !!
I’ll work on doing that and see how that plays out for the website…

@craigb I tried removing the smooth wrapper and it didn’t work…
It all started when I added new content to the page… :confused:

Perhaps try removing all references to the Elfsight cookie consent and see if this helps?

Hi @ErmaH!

I tested your site’s URL on my iPhone using the Safari app and I’m getting the same behavior of there being lots of space below the footer.

Whenever I see behavior on Safari browsers that isn’t happening on other browsers (like Chrome and Firefox), my first guess goes to grid and percentage heights. Safari interprets percentage heights differently. Found an article that goes more into this.

Going through your read-only link (thanks for providing that by the way!), I found the Max H was set to 100% on the Yelp icon image. Try setting that back to auto and see if that works! :crossed_fingers:

3 Likes

(Literally Jumping For Joy Right Now!!!)

I can’t thank @craigb and @Stacy Enough for both of your help!!!

Who would’ve thought that the percentage height from the Yelp Icon Image would be the answer key! :sweat_smile:

I will definitely keep the article for how safari interprets percentage heights.

Thank you very much @Stacy now I can move forward in my next newbie project of creating a pre-loader page :crazy_face:

2 Likes