How to make headings responsive?

[sportsfan74]

Whenever I make changes to the H3 heading tag in the typography section, it just stays the same font size throughout desktop, tablet and mobile devices.

How do I make the font sizes to show or reflect differently for the H3 heading tag on desktop, tablet and mobile?

[David]

Hi there,

you would need some CSS like this:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    h3 {
        font-size: 24px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    h3 {
        font-size: 28px !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sportsfan74]

Hi David

The mobile one is working, thanks.

but the tablet one is not working for me?

[David]

Could share a link to the site so i can take a look?
You can edit your original topic and use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sportsfan74]

using localhost xampp to test website

[David]

You could try adding some importance to the CSS property – i edited the code above to include that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts