1 reply [Last post]
Last seen: 8 years 17 weeks ago
Timezone: GMT+1
Joined: 2012-04-30
Posts: 1
Points: 2


I have recently converted my website, www.jertix.org to responsive web design, however I can't understand how to get the font size right on Smartphones.

For example, when I open the website with my Google Nexus, I see a very small text. If I set it to 1em, which I guess would be 16px, it is really small. So now I have changed it to 1.4em with:

@media screen and (max-width: 800px) {
   body{font-size: 1.4em}

I can see on websites like css tricks and smashingmagazine that the text is really big and easy to read. What am I doing wrong?

Another issue, why is my mobile using max-width: 800px of resolution instead of smaller resolution I've set up in the css, like 640 or 320? Is there something wrong with my media query declaration?

Tony's picture
Last seen: 7 hours 13 min ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi microcipcip, Have a look

Hi microcipcip,
Have a look at this example @media page in different browsers/devices.

I think what you should have been doing was using min-width and setting the initial scale:

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

See also: