Fix first paragraph font size in Ghost Blog/Casper theme posts

I originally built this blog on top of the Ghost blogging platform until switching to WordPress. After upgrading Ghost from v1.1 to v1.5, I noticed immediately that the font size of the first paragraph in all of my Ghost posts was noticeably larger than the following paragraphs.

I didn’t like this change, so dug around the code to figure out what was causing it.

This special formatting is specified in the .post-template .kg-card-markdown > p:first-child class in screen.css.

/var/www/ghost/current/content/themes/casper/assets/css/screen.css

.post-template .kg-card-markdown > p:first-child {
 font-size: 1.25em;
 line-height: 1.5em;
}

In general, it’s best practice not to edit these system files directly, as future upgrades to Ghost will overwrite any changes you made. But the good news is that Ghost provides an easy option to cleanly edit formatting with Code Injection.

To remove this special formatting and return the font size of the first paragraph of your Ghost posts back to normal, paste the following code into the Blog Header section of the Code Injection Page in your Ghost Admin site, then click Save.

Ghost Admin Portal > Code Injection > Blog Header

<!-- Fix first paragraph font size -->
<style type="text/css">
 .post-template .kg-card-markdown > p:first-child {font-size: 1em;}
</style>
  • Aayush Goyal

    Not working for me.