Alignment bug in mobile?

Today (15 Jan) I’ve started seeing alignment issues which I have never experienced before. (I’ve built 40+ webflow projects). This appears to happen on the narrow viewport.

I’m having to wrap elements inside Divs to prevent this. See image below.

Is anybody else experiencing this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

:wave: Hi @RugbyWebDesign this does seems weird.

Could you please share your read-only link so we could take a look at your settings please. We can then decipher where the issue lies.

Many thanks! :webflow_heart:

Apologies, link below

https://preview.webflow.com/preview/teaatrainbows?utm_source=teaatrainbows&preview=97be0a04d9dbcb20d05b9aa9abae4f47

1 Like

Thanks for that.

It’s caused by the Sample Menu button having a setting of display: inline block so it will try to sit inline with what’s around it when it can. It’s only on some screen sizes which is why it’s likely not been spotted before.

One way around this is to change the buttons display setting, or even better would be to give the text box class that your content sits in a setting of display: flexbox vertical

Grid and flexbox are great when used together so definitely no need for one or the other.

CloudApp

Hope that helps! :slight_smile:

1 Like

I had to rebuild this project as clients Apple products made the website look dreadful. Client was complaining about issues I did not recognise or see. Client sent screenshots from MacBook and iPhone and I could see all problems related to Grid.

Once rebuild using divs the client was happy.

So, question is "should we abandon use of Grid layouts? Because this site was completely screwed on Safari

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