Mobile view not filling 100% width... until you scroll down!

Hi All

I’m working on this website and something strange is happening in mobile view, both portrait and landscape. When the site first launches, the hero section and a number of sections below it do not stretch the entire width of the screen (the part framed in red) although the navigation bar does:

This happens on the actual devices… it looks fine in Webflow’s preview mode. (Everything’s working as expected in Desktop and Tablet views).

However, the Blog section and everything below it stretch the full width, as expected:

But that’s not all… once you scroll to the Blog section and back up again, everything before it then stretches full width and remains like that until the page is refreshed:

I must be missing something. Any ideas?

Cheers


Here is my public share link: [https://preview.webflow.com/preview/alisalebow?preview=34d797e955f6947b90997684d0ffeb01][1]
([how to access public share link][2])

Hello @spincinconi

Here is the reason:

This element cause overflow on load, then after interaction element stays on its original position and overflow disappear.

For fix this issue, give to section “tab section” overflow: hidden, at least for mobile view.

Regards,
Anna

hey@sabanna, I came across the same problem. I haven’t add any animations to my page yet, but the mobile view is beyond the screen width. How can I fix this problem?

Thanks for your answer.

Hi @Xiaonan_Chen, I will be glad to help you, but I will need to see your read-only project link. Here is guidance: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

Or, if you posted topic with your question and link already, please ping me there.

Cheers,
Anna

Thanks @sabanna,

I haven’t made a good organization of my website, so it may be a little bit confusing. You can click this link and then click the “illustration” page and that’s it.

https://preview.webflow.com/preview/joy-chen?preview=4333e365f2f5f2dd6c9193884ad325af

Hello @sabanna

Many thanks for your prompt reply.

Somehow setting the element overflow to hidden didn’t work. However, I changed the interaction to scroll in from bottom instead of from right and it did the trick.

Thanks again!

1 Like

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