CODEWITHSUNDEEP
htmlcssmobileviewportfont-size
Adam Smith
Adam Smith

Reputation: 1

Setting different font sizes on page for desktop and mobile

My site uses an out-of-the-box responsive theme: "Lawetique."

The font looks lousy on my desktop PC. The text is thin and narrow. But it looks great on a phone. The narrow typeface suits the vertical orientation, and it's just the right size.

It would look much better on the desktop if it was just larger, but I don't know how to make the font scale larger for PC without making it look cartoonish on mobiles.

I'm OK at CSS but clueless on device control. Any help is sincerely appreciated!

Upvotes: 0

Views: 1729

Answers (1)

Edvards Niedre
Edvards Niedre

Reputation: 700

/* mobile styles first */
body {
  font-size: 16px;
}

/* tablet styles */
@media screen and (min-width: 768px) {
    body {
        font-size: 20px;
    }
}


/* desktop styles */
@media screen and (min-width: 1024px) {
    body {
        font-size: 24px;
    }
}

Upvotes: 2

Related Questions