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.

1 Like
#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. https://mrhack.io/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?