Font tiny on mobile.

Question

Hey guys! I have a weird problem: my website font is tiny when viewed on my mobile.

1). I haven't changed the text size in my CSS (pasted below).

2). I tried using a different Google Font – same result.

3). It only happens in this website – when I test the "Nick Pettit, Designer" website on my mobile, the text displays normally (at 1em).

4). All other websites on my mobile are displaying at 1em.

Can anybody help me? I know I can just bump up the em size in my main.css, but I have a feeling that won't be addressing the issue here.

Thank you! –Chris.

/*****************************
GENERAL
*****************************/

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

#wrapper {
  max-width: 940px;
  margin: 0 ;
  padding: 0;
}

a {
  text-decoration: none;
  color: #ee1d53;
}

img {
  max-width: 100%;
}

/* .extendfull, .extendleft
{
    padding-left: 3000px;
    margin-left: -3000px;
}

.extendfull, .extendright
{
    padding-right: 3000px;
    margin-right: -3000px;
} */

p {
  margin: 0;
  padding: 10px 0;
}



/*****************************
HEADER
*****************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#contact-header {
  float: right;
  list-style: none;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
}

#contact-header li {
  display: block;
}



/*****************************
CONTENT
*****************************/

#herobar {
  background: #f2eee5;
}

#about {
  background: #d1e8c5;
}

#about img {
  float: left;
}

.attribution {
  text-align: right;
}

.endsectionlink {
  text-align: right;
}



/*****************************
FOOTER
*****************************/

#nextstep {
  background: #f2eee5;
}

#legal {
  background: black;
  color: white;
}

Answer 1 · 2016-01-12T15:08:03Z

January 12, 2016 3:08pm

Thanks, guys. I will set the font size as you suggest, which sounds like good advice – although that didn't fix the problem! Increasing the size corrected the problem on the iPhone, but made the desktop text too big.

For now I have corrected the problem by adding this CSS:

body {
  -webkit-text-size-adjust: 250%;
}

This embiggens the text on a mobile device only.

Answer 2 · 2016-01-12T12:27:41Z

January 12, 2016 12:27pm

In the css for body declare font-size: 16px.

body {
   font-size: 16px;
}

This will set 1em to be 16px across your website.

The problem I think you are encountering is that different browsers have different default font sizes, most are 16px but some are different.

By declaring font-size: 16px on your body-element you force a normalized value across all browsers.

It is also quite handy for responsive design.

For example you could change the font-size set on body to 14px instead of 16px with a media query and effect every font-size across your whole website that uses em values as the value of em will change, so elements that are set to 1em in this example would all change from 16px to 14px :)

Answer 3 · 2016-01-12T15:21:19Z

January 12, 2016 3:21pm

Try adding :

<meta name="viewport" content="width=device-width, initial-scale=1">

to your meta tags in your HTML header.

This will tell mobile browsers not zoom in automatically on page load.

(This may be what is causing you problems on iPhone)

Answer 4 · 2016-01-12T13:02:16Z

January 12, 2016 1:02pm

I don't see any declaration to set the font size in your styles.

Welcome to the Treehouse Community

Looking to learn something new?

Christian Kavanagh

Christian Kavanagh

Font tiny on mobile.

4 Answers

Christian Kavanagh

Christian Kavanagh

Codin - Codesmite

Codin - Codesmite

Codin - Codesmite

Codin - Codesmite

Ali M Malik

Ali M Malik