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

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

Home Forums Support How to reduce the font size for mobile. I am using the theme article

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1591323
    liza

    How can I reduce the font size on mobile? I prefer 16px while desktop screen is 18px. I am not tech savvy so please be more specific with the CSS coding instructions. Thank you.

    #1591350
    Elvin
    Staff
    Customer Support

    Hi,

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

    Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1591355
    liza

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

    #1591390
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1591401
    liza

    I did but it only works for the desktop screen.Whatever font size you choose for the desktop will be reflected on mobile as well.There is no specific font setting that I can use to adjust the font size on mobile.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.Thank you anyway for the immediate response.

    #1591411
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1591416
    liza

    Thank you so much,Alvin😘💝

    #1591417
    Elvin
    Staff
    Customer Support

    No problem.

    Happy holidays. stay safe! 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.