Menu on Android when Vertical Do Not Function

Well, as the title suggests, the menu block at the top of site when in the vertical position doesn’t respond.

If I turn the Android phone to landscape, the menu block works.

Glad for any thoughts…

Matt

Hi Matt,

Is there a URL we can look at?

I guess that would help.

www.goofrings.com

It’s not just Android. I have the same problem when I view the site on my iPhone. My guess is that it could be something to do with the fact that the page is scaled down to fit narrow screens. Part of this (at least) is caused by the fact that the goofheadwide1 image has its width set to 509px, which is wider than a typical phone screen. If you give it a percentage maximum width (e.g. 100% or less) that should cause it to display at a smaller size on narrow screens.

Thanks Jeremy…I’ll adjust that. Strangly, it works on my iPhone.

I appreciate the help!

Done. Seems to make no difference.

Something is still causing the page to be scaled down - it’s too wide to fit (without scaling or scrolling) in a view area that is narrower than around 600px. Ideally, you want a page that will fit on any devices down to about 320px wide.

Looking at the HTML, I see that for the 320px breakpoint you’ve set the pagediv to have a width of 600px. For any breakpoint, you really want to set the pagediv width to be no wider than the breakpoint.

Going back to the image, I see that you’ve changed its width (rather than max width) to be a percentage. You can leave the actual width as it was - or remove it completely if you want the image to display at its natural size on wider screens. The advantage of setting a maximum percentage width is that this will have no effect on wider screens, but will cause the image to be smaller on narrow screens. There is a separate max width field in Freeway’s Inspector palette.

Follow-up: I’ve just noticed that Freeway doesn’t let you set a maximum width for images unless they are pass-through images (images imported into a blue or green box). Generally, pass-through images work better than non-pass-through images for flexible layouts.

The logo at the top is (or I thought was) set as a pass through image.

I did change the menu break point as a test…put it back.

I’ve also changed the top logo to use “available”…

I couldn’t tell from the source code whether the logo is a pass-through image, but I added the follow-up comment in case it wasn’t and you couldn’t find a max width field.