Site logo

Archived topic

How to make headings responsive?

5 replies · Started by sportsfan74 on June 21, 2019

Viewing posts 1–6 of 6

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?

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;
    }
}

Hi David

The mobile one is working, thanks.

but the tablet one is not working for me?

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.

using localhost xampp to test website

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

This archived topic is closed to new replies.