Gutenberg paragraph font

  • I have CSS that sets the font size for p content on post pages to 1.3 em. This is a good size for me. The only problem is after i use this CSS, the paragraph Gutenberg block won’t respond to any smaller or larger font now. If I deleted the above code it does. The paragraphs where I want a larger font are the colored ones. (I’m not using Headings so I can easily color the block.)

    Here’s the CSS…

    .single-post #content p {
    font-size: 1.3em;
    }

    Is there a way to fix this?

    Thanks!

    • This topic was modified 5 years, 9 months ago by rwstarkey.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • CSS is all about specificity. Using an ID like #content makes your rule very specific and it will override other rules to make it larger or smaller.
    If you want your rule to be the default, it has to be less specific so that the others can override it.

    Thread Starter rwstarkey

    (@rwstarkey)

    OK. I’m tech, but new to CSS. Would just dropping the ID maybe work? Tnx!

    Thread Starter rwstarkey

    (@rwstarkey)

    So interestingly, with either #content there or not, if I use a custom size in the Gutenberg paragraph block then it responds, if i use a pre-defined like large, then it doesn’t respond. I have no idea why?

    Using a custom size on the paragraph block means that it puts an inline style on the paragraph. Inline styles are the most specific, so they always override other styles.
    Using a keyword like large, the font-size is based on the user’s default size, which is medium. If it didn’t change, it was either still being overridden or the size was very similar to the size you already had from other definitions.
    https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

    Thread Starter rwstarkey

    (@rwstarkey)

    It was still being overridden until I chose the custom size. If I get rid of the 16pt CSS to control <p> then large works. Otherwise no. But dropping the CSS makes the default p font too small. I guess the only way to fix that is set the p font to 14 or 16 default in a child theme? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Gutenberg paragraph font’ is closed to new replies.