Change font size on mobile

Developer help
1

Hello team,

I’m using a default Casper theme.

I want to make these changes to my font size on mobile:

  • 20px font-size
  • 1.6em line-height

How to do it?

I looked here Text sizing adjustments but still no idea how to do it.

2

You can add something like this to a <style> in your Code Injection > Site Header

@media (max-width: 650px) {
  .gh-content>p {
    font-size: 20px;
    line-height: 1.6em;
  }
}

Note that this will change the font size for your post body text for any screen under 650px.

3 Likes
3

Cool, thanks! Added in code injection section.
Do I need to restart Ghost or clear cache to see changes - seems they are not yet on website. NGL: ANONYMOUS Q&A - HOW TO USE? FULL OVERVIEW

4

They’re live and active. Remember that they’ll only show up on mobile:

CleanShot 2022-07-27 at 09.50.05
CleanShot 2022-07-27 at 09.50.05557×925 83.3 KB

CleanShot 2022-07-27 at 09.52.25

1 Like
5

Thanks! By the way, I have disabled Member button “Unlock all content” in Ghost settings, why is it still showing up for you? Is it caching?

1 Like
6

Hmm I’ve tried using the following but the font isn’t changing on mobile:

<style>
    @media (max-width: 650px) {
        .gh-content>p {
            font-size: 30px;
            line-height: 1.6em;
        }
    }
</style>

Maybe I’m missing something :frowning:

7

It’ll depend on your theme. Can you share your site?

8

I’m lazy, I use clamp() for font size, no media query needed

font-size: clamp(0.9rem, 2vw, 1.3rem)

Generator: https://clamp.font-size.app
Guide: Linearly Scale font-size with CSS clamp() Based on the Viewport | CSS-Tricks - CSS-Tricks

clamp(minimum, preferred, maximum);

Also… "clamp()" | Can I use... Support tables for HTML5, CSS3, etc

9

Sure, HTML5/CSS3 workis fine in Ghost HTML Cards/Snippets.