Increase Header Font Size in Tablet Only

Hi there,

you can use this CSS to target the main title and description for tablet devices:

@media (min-width: 769px) and (max-width: 1024px) {
    .main-title {
        font-size: 20px;
    }
    .site-description {
        font-size: 16px;
    }
}

David,

Thanks for your response.

It's not the title or description that is the issue.
It's the header <h2>

Then you would do this:

@media (min-width: 769px) and (max-width: 1024px) {
    h2 {
        font-size: 20px !important;
    }
}

Thanks, David, but that doesn't resolve the issue.
I've altered the font size in the coding, yet nothing changes.

Can you link me to the Site so i can see what the issue is?
You can edit your original topic and use the Site URL to share the link privately.

I'm unable to do that.
I thought I explained the issue well in my initial post.

When I view my site in the customiser, the WordPress interface provides three options to view the site, desktop, tablet, mobile.

However, when I use the customizer to select the <h2> font size for the mobile width, that same setting displays the <h2> font size too small when viewing on a tablet.

What I need is to be able to increase the <h2> font size when viewed on a tablet.

I hope this is a little clearer.

Yep, that is what that CSS does - i even tested it to make sure - if it is not working then something else is overriding that CSS. I have edited the CSS here to include !important try that.

If that doesn't work then it would be good to see the site. If not possible where are you adding the CSS?

Thanks again David, but doesn't seem to be working for me.
I'm aware that it is a simple task, but it's not making any difference.

I don't have any time left right now, but I will give you a shout tomorrow sometime.

Thanks again

Ash

OK, let us know where you're adding the CSS? And whether you have any other CSS in there.

@david, I am having the same issue as above.
Im trying to have the H1 text resize between desktop/Tablet/Mobile

The CSS is in the simple CSS pane
http://127.0.0.1/wordpress/wrestlemania-package-contents/

@media (max-width: 768px) {
h1 {
font-size: 35px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
h1 {
font-size: 45px;
}
}
@media (min-width: 1025px) {
h1 {
font-size: 55px;
}
}

Hi @Travel22Mania,

Consider using the customizer settings for the typography as shown here -
https://share.getcloudapp.com/5zu9rPOz

There's a responsive setting for tablet in it. :)