[Resolved] Smaller font size on mobile

[CRISTO]

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.

[Leo]

Hi there,

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

Let me know if this helps.

[CRISTO]

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

[Tom]

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.

[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?

[CRISTO]

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!

[Leo]

@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>

[CRISTO]

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.

[Joerg]

Perfect!

Thank you 🙂

[Tom]

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.

[CRISTO]

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.

[CRISTO]

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.

[Tom]

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 🙂

[CRISTO]

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.

[Tom]

Fair enough! Glad you’re enjoying GP 🙂

[Author]

Posts