Lateral (horizontal) scroll on mobile

I appear to have horizontal scroll on mobile.

But only on the published site. It doesnt appear on the preview pane.

I can’t for the life of me work out what is introducing this

My public share link…

https://preview.webflow.com/preview/heard-agency-website?utm_source=heard-agency-website&preview=c82cb5ce6b5c2758c61c9140fffb9886

Published site

http://heard-agency-website.webflow.io/

Hi @Willem_Reyners_Tay

I just checked your site and seems that one of the sections (Work-static) is a bit larger than your canvas. Seems setting an overflow:hidden on that section is fixing the issue.

CloudApp

Can you please try and see if that resolves the issue?

Note that it’s a good practice to set max width 100% and overflow hidden on your sections to ensure you don’t get a horizontal scroll on your site.

Hope this is helpful.

2 Likes

That didnt help at all.

In fact now I am getting weird issues between the published and preview site.

All the relative content seems to be shifted to the left… im going crazy here.

Why are these so different?

Hi again @Willem_Reyners_Tay

The animation section has elements that fly out of the section boundaries, that’s why on the live site you get that horizontal scroll. You need to set overflow:hidden on the animation section as well to fix that issue.

Remember, to avoid horizontal scroll, set the sections to max width 100% and overflow:hidden.

Please, let me know if this resolves the issue.

2 Likes