Mobile odd white margin/padding

Hopefully someone can help…

I have noticed that in the live version of my site on a mobile device our site has a strip of white on the right hand side.

This doesn’t show in the webflow preview.

any ideas?

Thanks

Matt

Hello @mattmatson

It is overflow, which caused by one of the headings, there is little left margin. When I turned it off, everything looks good

Regards,
Anna

1 Like

Hello,

thanks for coming back to me, I have tried that and its still the same issue when looking at it in a LIVE version on iphone. I’ve checked in device mode on chrome and it looks fine, but thats not the case in LIVE.

Could you provide read-only link to your project? It would help to find the reason of this issue.

thank you

https://preview.webflow.com/preview/dance-days?preview=b612a94a75b70aeb4cc6ae3680e2f1a2

Well, There is some issues with negative margins and structure. I made couple videos to show you more correct method to manage elements. You can fallow my steps for fix overlap problems:


Or just rough method- make div “NewWorkshop” overflow=hidden, on all devices. It should fix the problem, but will notice again: using negative margins for manage elements positioning is not good practice and better use this methods when nothing else can be done.

Regards,
Anna

Hello Anna,

Thank you so much for going to all this effort for me!!!

I have followed your instructions and republish the site, but, I still have the issue in LIVE on iphone 6s.
In preview mode on webflow everything looks perfect.

I only have an iphone 6s to test on. so im not sure if its the same on other device

I would recommend check other elements with negative margins too.
For example, I found out that div “dance-styles” has negative margins too. If remove that margins it fix overflow.

Cheers,
Anna

THANK YOU!!! Massive help!

:grinning:

You are welcome :slight_smile:
P.S. Negative margins are tricky :wink:

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