Setting Font-size for mobile

HTML & CSS
1

I have used set font sizes for h1, h2, h3, h4, h5 and h6. I would like them to be a bit smaller on mobile. I tried this but it didn’t work:

@media (max-width: 768px) {
h1 {
font-size: 2vw;
}
}

Thanks

2

What does this mean?

That CSS does exactly what I would expect it to do.
What did you expect it to do?

It does make the the text rather smaller than I would consider useful.

With dynamic units like vw you may find it more useful to combine with standard units, via calc.

font-size: calc(2vw + 1em);

Though since you are using a media query, do you need it dynamic? Or do you need the query?

3

I expected it to reduce the font-size from the set value of 32px to 2vw. There was no change. I just figured out why. My css should have been:

@media (max-width: 768px) {
.entry-content h1 {
font-size: 2vw;
}
}

4

So the selector was not specific enough to overide your previous font’size rules.
Though I still think 2vw will be much too small on mobile, even for body text, let alone a primary heading.

2 Likes
5

Yes, too small. I fixed it. Thanks

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.