Increase Header Font Size in Tablet Only

[Ash]

Hello,

Having looked through the support forum, I am unable to find a solution for this. I’m fully aware that it will be a simple task, but I can’t seem to grasp it.

When I view my site in the customiser, the WordPress interface provides three options to view the site, desktop, tablet, mobile. However, when I customize it for the mobile width and then view it in table mode, the header font which I set for mobile is then too small when viewed on a tablet.

I would appreciate any help on this.

Thanks in advance.

Ash

[David]

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

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

[Ash]

David,

Thanks for your response.

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

[David]

Then you would do this:

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

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

[Ash]

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

[David]

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.

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

[Ash]

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.

[David]

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?

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

[Ash]

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

[David]

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

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

[Author]

Posts