Streaming live at 10am (PST)

Nav Bar pushing margins on Phone


#1

Here is my read only code: https://preview.webflow.com/preview/kubyenergy?preview=undefined

Problems: When I open my website on my phone, the nav button is outside the margins on my phone. The rest of my site's content is aligned properly to the phone screen but I have to scroll to the right to see the dropdown menu. It appears to be fine in my webflow editor though.

To reproduce: Open site on cell phone. Scroll right to view the nav menu button. Why is it 'off the screen'?

Done using latest version of Chrome.

Thanks!!


Margin issue in mobile
#2

Hi @ayereniu, could you re-check the preview link you gave, the one you pasted is not working: http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link


#3

I see a similar issue on Samsung S5 phone where the font has been raised to large under the accessibility settings of the phone. Using Chrome browser on the phone. Will try it with the stock Android browser and report back.


#4

Hey @cyberdave, sorry about the link. Here is the correct one: https://preview.webflow.com/preview/kubyenergy?preview=f99961f420b4e34dc7a6e4b2d6c96a41


#5

Hi @ayereniu, thanks for the updated link. It looks like there is an overflow problem on the site in mobile landscape mode and below. This happens when some element extends beyond the viewport, and causes the site to horizontal scroll and I believe issue for the menu.

You have an All Paragraphs class with the right margin set to -14px. On mobile landscape and lower, update that to 0px.

Also, you have some overflow on the Footer symbol, so on the mobile landscape and lower, double click the footer symbol, and on the root element, called Footer, set the overflow property to hidden:

I would check those things first, then republish and check again in mobile if any change. Cheers,
Dave


#6

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