[Resolved] How to reduce the font size for mobile. I am using the theme article

Hi,

Can you specify which texts on the site are you trying to change font size? Screenshots would help a lot.

Thank you.

I am referring to all texts to be altered to 16 px when shown on mobile and 18px for the desktop screen.Thanks.

Have you tried GP Premium’s Typography settings found in Appearance > Customize > Typography?
https://docs.generatepress.com/article/typography-overview/

You can try setting font sizes through this setting on different sections. There’s no blanket setting for all text as they use different classes and html tags (h1-h6, span, p, etc).

Note: Settings set here may or may not apply on plugins as some of them have their own CSS.

I’ve inspected your site and the code is actually applied and working although its quite hard to notice because the difference between 16px and 18px is quite minimal.

.I however use a css code provided by one of your team members and it seems to work on smaller cellphones but not on bigger ones.

I believe this was the code given?

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

This is quite on point for the majority of mobile devices. If you want 16px for tablets too you’ll have to add this.

@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
}

But this will also affect desktops with smaller screens(800×600 & 1024×768 resolution).

It’s quite difficult to cater for all viewports as different devices uses different things. If we try to include everything, we risk getting performance slowdowns.

Here’s a good read about this.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

No problem.

Happy holidays. stay safe! 🙂