Docs

[MB]

Hi,

Please advise the most recent code to make a global adjustment for all H1-5 headings displaying at a smaller font on mobile devices.

Thanks, MB

Vancouver Island Hiking Guide

[Rupok]

Hi there,

Thanks for writing in! You can add the below code :

@media only screen and (max-width: 480px) {
h1, .h1 {
    font-size: 400%;
}
h2, .h2 {
    font-size: 285.7%;
}
h3, .h3 {
    font-size: 228.5%;
}
h4, .h4 {
    font-size: 171.4%;
}
h5, .h5 {
    font-size: 150%;
}
h6, .h6 {
    font-size: 100%;
}
}

Now change the font-size for the heading levels to your preferred size.

Cheers!

[MB]

Wouldn’t we want the percentages smaller if we want the fonts smaller on mobile?

[Paul R]

Yes,

You need to change it to achieve your desired font size.

You can also change it in px if you want a fixed size.

Thanks

[MB]

These settings did not work for us. Even with tweaking the percentages and font sizes. There is no consistency across the site, some h2 headings went tiny and others went huge. Is there another more elegant solution?

[Christopher]

Hi there,

Please provide us with screen shots so we can see the issue.

Thanks.

[Author]

Posts