Mobile Preview & Mobile browser being displayed differently

Hi.
When I view the the website’s footer in the mobile preview, it looks fine. But when I view it on Mobile Safari/Chrome browsers, it looks bad.
I read the previous post on this issue, its solution didn’t solve my problem.
Here’s a share link: https://preview.webflow.com/preview/nbl-design?preview=63b79cb367af9623839b2ad3548d6163

Thank you,
Naama.


It’s a pretty basic footer, you could try not using flex. Float right and then align center on mobile breakpoints.

Hi @Naama

As @r_rosenow suggested, you can remove the flexbox settings and use display: block to fix the overlapping elements in your footer.

Here is a GIF for you:

Hope this helps :slight_smile:

Thank you very much both @Brando and @r_rosenow.
Another question - what tool do you use to create this gif?

You can learn more about GIFs here.

1 Like

Thank you @r_rosenow!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.