Streaming live at 10am (PST)

[Resolved] Format issues on mobile - Google Chrome


#1

Good morning and thank-you in advance for your time.

I am viewing the attached pages in Google Chrome on a Samsung Galaxy s5. The menu on the index page and all pages except the prices-availability page is showing correctly. On the latter page, the menu jumps to the right. See attached images.

The rogue index is showing correctly on Webflow and also on an ipone. I have thoroughly checked the settings and cannot find anything different about this page.

Could you please look into this issue for me.

The page is live at mthothamaccommodation.webflow.com and also at mthothamaccommodation.net

Thank-you,

Allan


#2

Can you please share your project’s public link so it's easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#3

https://preview.webflow.com/preview/mthothamaccommodation?preview=cc4f5ac094c7333b3df57cecf1c8417e


#4

Ok what I see is you're using a row widget for your header and no proper navbar widget. I'd recommend using a navbar widget and set it up not to display a mobile menu. This way, your code will be better HTML5 compliant.

Can you try reorganizing your header structure and come back if you encounter difficulties? I understand you want the title to be on the side of the menu for the desktop and tablet and on top of it for the mobiles devices, there is a way to do that with a standard navbar.

See here how I try, it's really a draft but you should get the idea and end up with a better HTML structure and no bug. https://v.usetapes.com/0nqH5z4lgw


#5

That's totally awesome Vince and I love the vid. Thanks heaps for that.

The only disappointing part is that the my site was actually created using the Slate template, so any "bad" nav menu was taken straight from that template. The Slate template also has other formatting issues. Perhaps a good one to either review or take down.

The non standard nav menu may also be why the Google speed test is woeful on this site compared with my other site which I made from scratch and it checks out much better.

Anyway, I appreciate your help. I guess I'll just begin again on the header. Please leave the vid up because I may not get to this for another few days.

Cheers,

Allan


#6

I have redone my NavBar which was a good exercise. However, it did not fix the problem.

The problem was actually being caused by a default margin on the embedded calendar which was slightly outside the page margin, but only on a mobile device. This was causing the whole page to jump slightly sideways..

Anyway, all sorted now and thanks for your help.

I put another post up for issues with the forms. Would appreciate some help there as well when you get the time.

Allan


#7

Hi glad that you've found how to fix the issue. I've seen your post about the form but honestly didn't even open it, there are two things I'm not good at, forms and JS smile Will open it to see but don't count on me for form help :/


#8