I can't see any reason why the header and navigation text is tiny on mobile.

Question

I've downloaded the project files and uploaded them to my host so that i can view how the site actually looks on mobile instead of just using a small browser window on desktop to simulate a mobile.

On desktop the site looks great and everything is a good size but not on mobile. The paragraph text in the main section is the size you'd expect but the navigation links are barely even readable. I tried a different phone browser and no change, i then tried the deceive emulation thing on Google Chrome desktop and i selected a bunch of phones and they all had the same small navigation text problem.

I get that they have a higher pixel density but i don't see why the font is smaller than the paragraph font when they should be the same size but the list on the "contact" page appears to have the same size font as normal paragraph text, but the navigation list font on the same page is still tiny.

So it's a problem specific to the header but i can't see what the problem it. I know this is a long and random post but it just seems weird to be building this website for mobile when is doesn't even work for mobile.

Thanks. Ben.

Answer 1 · 2015-06-26T02:07:26Z

June 26, 2015 2:07am

Hi Benjamin,

That's pretty odd that paragraph text would be normal, but the header is tiny. Something worth trying is to add a common meta tag in the head section of your html document when developing mobile friendly Web applications.

If you'd like to read more about this, check out the MDN article Viewport meta tag.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

If this doesn't resolve the issue, consider posting all of your code and I'll try to reproduce it on my local server.

Cheers

Answer 2 · 2015-06-26T19:27:35Z

June 26, 2015 7:27pm

edit: I've just started the next videos(the responsive ones) and saw that the site looks as expected on your iPhone, so maybe this problem is specific to Chrome on Android. But then again Firefox did the same thing.

Thanks for the reply.

The new meta tag didn't seem to change anything, but it'll be another thing to read up on at some point.

I would post the code but it's just gonna be the code of the project files because that's what i've been testing it on. I've uploaded the project files to my server without changing anything at all. You can view them/the site at http://www.joannewalker.co.uk/target2 . If you view the link on desktop everything looks great, even when you make the window mall to simulate a mobile screen just like in the videos. But when you view the same link on mobile(i tried Chrome and Firefox for Android), the navigation links are pretty tiny, the other header font seems smaller too. If you view the link on Chrome desktop and then do the mobile emulation mode(right click, inspect element, then the little button on the left of the toolbar next to "element", then select a phone) then the navigation and the rest of the header will appear small there too.

Heres a screenshot from my phone and Chrome desktop in the mobile view thing, http://imgur.com/a/MjHDl The site appears 100% normal on Chrome desktop in normal view though, like in the videos.

I used the "contact" page so it shows the contact details list appearing with a normal sized font, unlike the navigation list.

Thanks again. Might sound like a dumb question but i just wanted to point it out. I'm just gonna continue on for now.

Welcome to the Treehouse Community

Looking to learn something new?

Benjamin Walker

Benjamin Walker

I can't see any reason why the header and navigation text is tiny on mobile.

2 Answers

Robert Richey

Robert Richey

Benjamin Walker

Benjamin Walker

Robert Richey

Robert Richey