Navigation container wider than content containers in mobile phones

In creating this design i checked how it looked in the Webflow toggle previews from desktop to mobile, and on an device emulation site I use for testing multiple devices (http://mobiletest.me/ ). I never saw a problem. However in looking at the site using an actual mobile phone both i and my client are seeing that the navigation container is wider than the rest of the content containers. All looks fine on desktop and a Kindle Fire tablet.

I should also note the problem appears to be less pronounced using the Dolphin browser on my Samsung (Android) phone, much worse on my client’s iPhone (version 5, i think), and quite pronounced on the most up-to-date version of chrome.

I would appreciate any suggestions of how i might correct this!


Sharelink: https://preview.webflow.com/preview/mediasizes?preview=92ed09b8367226b2b939b0804ef256b8
My published Webflow space (temporarily) is here: http://mediasizes.webflow.com/

Not sure if this makes any difference: My design work is done in a Chrome 64 bit browser (most current version as of last week – Ver. 41) and i tested in"incognito" mode to see if that would help. (If it did, i could not tell). My OS is Windows 7 professional, 64 bit on a home-made intel i7 multi-core cpu with 12 G ram.

You have content that stand outside of the sections for interactions reasons. You need to hide it so it’s not taken into account when the browser calculates the dimensions of the sections.

Add a overflow:hiddent to your top sections and that fixes it.

http://vincent.polenordstudio.fr/snap/Webflow_-_fivestarisrael_mediasizes_2015-03-30_11-11-18.jpg

1 Like

Thank you! That fixed the issue.

I’m left with the question of why the Webflow emulation did not display the problem? (Nor did the 3rd party emulation site.)

It did, actually, but you must be vertically scrolling with your mouse wheel, wich constraint the motion vertically… so you don’t witness that the site also scrolls horizontally. When on mobile, you scroll all ways so it becomes more obvious.

I’m scrolling all ways all the time because I use a tablet. So even in the designer your “bug” was obvious for me.