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
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
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?
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;
}
}
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.
Yes, too small. I fixed it. Thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.