1 reply [Last post]
microcipcip
Offline
newbie
Last seen: 6 years 27 weeks ago
Timezone: GMT+1
Joined: 2012-04-30
Posts: 1
Points: 2

Hi,

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
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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:
@media