Twenty Fourteen – mobile site compressed to approx 1/3 screen width

What happens when you use the unedited parent theme?

seems to be caused by;

/* Move main menu bar container */
#primary-navigation {
	position: relative;
	top:-7em;
	left: 40em;
}

try and move that style into one of the @media queries so it is only applied in large browsers.

Thanks for the suggestion. I’ll try that, see what happens, and report back whether it is the solution.

Brilliant – thank you so much. That’s fixed it. I moved the menu settings in the Child theme to apply only to screen width over 1025px, like this:

/* Move main menu bar container but only for desktop width browser*/
@media screen and (min-width:1025px) {

  #primary-navigation {
	position: relative;
	top:-7em;
	left: 40em;
  }
}

It might need a little refinement after testing on other mobiles, but it works on both my iPad and my mobile phone. The content has expanded to the full mobile screen width, and the three-line menu button is now visible top right as desired.

It works as originally intended on the desktop.

Thanks very much indeed.

How did you know that this was the cause?

John McC

Further reflection:

Why does this work? I mistakenly thought my mobile screen in portrait mode was 1024px wide, hence my choice of min-width as 1025px.

But it isn’t: it’s 1080 x 1920 px. And anyway, I had almost the same problem in landscape orientation, on both mobile phone and iPad mini, which has a 768 x 1024px screen.

So why does this min-width work at all on the mobile phone?

How does the server know it’s a mobile if not from the screen width? I know the ‘browser-agent’ may tell it, but many phones now pretend to be ‘desktops’ don’t they?

Not critical, now I have an apparent fix, but I’d really like to understand why it works at all.

Hello!

I am using twenty fourteen and when I shrink my screen to check the functionality on mobiles and tables the top menu icon doesnt work nor respond this is my site if someone knows how to fix it I will be very grateful

https://www.central-monterrico.com/

I can’t answer this for you. But I think you would be more likely to get a useful response by starting a new thread – you don’t have the same issue as I did.

John McC

I’m having the same issue. It’s worked fine for months. I’ve updated to wp 4.0. Now when I view on my iPhone the content is only about 1/4 width of the screen. Very tiny print. On my iPad mini same issue but the content is about 3/4 width of screen.

I tried adding the above style to my child theme. Nothing changes.

https://www.marcuscheer.com

Help would be appreciated as this is the busiest time of the year for the cheer club and they all count on their mobile devices. LOL

Now I just checked the site on my computer and the main menu is moved to a different location (up and to the left where you can’t see the remaining menu tabs)

Any ideas where I can get help. It’s like it got a bug or something. I haven’t had any problems with twenty-fourteen since I set the site up last Spring.

I just figured out what was causing the main menu to screw up. It was the style coding that I put in from the recommendation from above. It didn’t help my mobile device display issue so I removed it and my main menu is back to normal.