Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Smaller font size on mobile

Home Forums Support Smaller font size on mobile

  • This topic has 21 replies, 4 voices, and was last updated 3 years ago by Leo.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #378348
    Cristo Rey

    I know there was some discussion earlier about titles, but I want to reduce the text size on all of my mobile site. I use a large font (18px) on my desktop version, but want to make it smaller on mobile.

    I think you have probably suggested a way to do this, but cannot find it.

    GP Premium 1.4.3
    #378538
    Leo
    Staff
    Customer Support

    Hi there,

    Instead of px in the HTML style, try using em instead.

    Let me know if this helps.

    #378571
    Cristo Rey

    Will that change only my responsive site? I want to stick with 18 px in my desktop version.

    #378615
    Tom
    Lead Developer
    Lead Developer

    You’ve added the font size directly to the elements using inline styles, which means we can’t change it on mobile.

    Instead of adding inline styles, use the font size option in Customize > Typography > Body.

    That way we can add a little piece of CSS to change it on mobile.

    #378667
    Joerg

    I have the same “problem” as Cristo Rey. New website (koenigsbrief.de) with big 18px font on the destop version, but I would like to use 14 or 16px on mobile.

    I doesnยดt any inline styles, but used the font size option in Customize > Typography > Body.

    Would you like to send me the CSS code to change the size on mobile, too?

    #378760
    Cristo Rey

    Thanks, Chris. I am not sure where to go next. Am I going to have to change each page on my site, or just the settings? I have changed the settings to Customize>Typography>Body>Helvetica>normal>18 px. I think I had that in the beginning, but when I start to add a page it does not have those automatically. I have to change the font to 18 px for the body, and then for H2 I have to change that as well.

    Since I don’t understand inline styles, I am probably doing something wrong. Anyway, no rush….enjoy labor day!

    #378913
    Leo
    Staff
    Customer Support

    @Chris – Since you are not using inline style, try this CSS:

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

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

    @Cristo – Inline style means you are adding style directly to the HTML like this: <span style="font-size: 18pt;">hy?</span>

    #378919
    Cristo Rey

    Well, Leo, thanks but still not sure what I can do. When I go to add, or edit, a page the tiny mce editor gives me Georgia 12 pt as a default. So what I have doe is changed that on each page to Helvetica 18px. I suppose that was not the right thing to do, but I don’t ever mess with code…it is well above my skill level.

    Probably a result of not really understanding WordPress in the beginning, so I can live with 18 px on the mobile if I have to, but would have preferred to make it smaller. I have around 750 pages, so not worth my time if I have to go in and change each one.

    #378929
    Joerg

    Perfect!

    Thank you ๐Ÿ™‚

    #378943
    Tom
    Lead Developer
    Lead Developer

    Cristo – if you go into your page and click the “Text” tab, you’ll see tons of references to 18px or 18pt. These references overwrite the GeneratePress options you’ve chosen in the Customizer.

    The easiest way to overcome this is to copy all of your text on that page (on the live website), then paste it into your editor in the “Text” tab. This will strip all of those inline styles.

    Then you can go into the Visual editor and do things like bold words, add links etc.. Just be sure not to change the size of the text inside the editor – let GeneratePress do that for you.

    #379052
    Cristo Rey

    Thanks, Tom As usual you are a great help. Somehow I know you just couldn’t take labor day off. Just so I understand….I open up my live page, and then basically delete the current page on my site, then paste it into the text tab on tat page. That page will still have the same titles, permalinks, links shortcodes, whatever? Just do that to each page? Ugh..I just checked, I have 828 pages, but I can do this a little at a time I suppose. Going to give it a try right now.

    #379098
    Cristo Rey

    Thanks again for the help everyone. Guess I should have known this from the beginning….as of now I will just stick with the larger font on mobile. To change over 800 pages, re-create links, etc. would literally take a couple of months and I don’t see that being worth it at this time.

    #379242
    Tom
    Lead Developer
    Lead Developer

    Ugh, yea – it becomes a big problem when there’s that many pages.

    Doing my method removes all formatting, including links, headings etc.. So it may not be the best method if you have a lot of those things.

    From now on, you can check the Text tab and make sure things look relatively clean. There should be little to no <span> elements ๐Ÿ™‚

    #379463
    Cristo Rey

    Thanks, Tom. I like my layout, so it is not a killer if it is a little too large on mobile. Love using GP by the way. btw, I went through this once when I transferred my old site from Homestead over to WP and GP. Took me almost two months, so not about to try that again.

    #379641
    Tom
    Lead Developer
    Lead Developer

    Fair enough! Glad you’re enjoying GP ๐Ÿ™‚

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