• Resolved Bilkish

    (@bilkish)


    Love the Hemingway theme, thank you.

    I’d like to reduce the font size for pull quotes.
    Any suggestions for CSS?

    Thanking you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • This should point you in the proper direction(s):
    https://pagely.com/blog/style-blockquotes-wordpress/

    Thread Starter Bilkish

    (@bilkish)

    Thank you for your link @kwbrayton – I haven’t been able to use the code in the article, since it doesn’t work on my theme.

    But I appreciate your help, thank you.

    @bilkish: The relevant chunks of CSS for pullquotes is in this section in style.css:

    /* Block: Pull Quote ————————- */
    .post-content .wp-block-pullquote {
    background: transparent;
    border-bottom: 4px solid #444;
    border-top: 4px solid #444;
    margin: 2em 0;
    padding: 3em 0;
    text-align: center;
    }

    You add the CSS declaration to control font-size in this selector. Let’s say you want to set it to font-size: 10px; You can play around with different sizes (Google info on font-size).

    /* Block: Pull Quote ————————- */
    .post-content .wp-block-pullquote {
    background: transparent;
    border-bottom: 4px solid #444;
    border-top: 4px solid #444;
    margin: 2em 0;
    padding: 3em 0;
    text-align: center;

    font-size: 10px;

    }
    I have modified the blockquote (different from pullquote) CSS code for my site in this section of CSS:

    /* Post Quotes ——————————- */
    .post-content blockquote {
    background: #CFE1B9;;
    border-radius: 0px 10px 10px 0px;
    border-left: 10px solid #718355;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    }

    You can see an example here: https://oakvillechurch.org/blockquote-examples/

    I don’t use pullquotes so this example pullquote is getting impacted a bit because of my changes to the blockquote section.

    I use a child theme with Hemmingway so my code goes into the style.css file for the child theme. If you don’t use a child theme, you can add the declaration to the Additional CSS section of the customize appearance for the theme like this:

    .post-content .wp-block-pullquote {
    font-size: 10px;
    }

    You could add this declaration directly to the style.css file of the main theme but any new updates will overwrite it.

    I hope I have correctly understood what you are attempting and I hope you can make sense of this.

    • This reply was modified 3 years, 9 months ago by kwbrayton.

    I should add that WordPress caches the CSS code of your theme. Every time you make a change to the style.css file you need to flush the cache to load the update. Not sure if this is required if you just add the code to the Additional CSS section.

    Thread Starter Bilkish

    (@bilkish)

    @kwbrayton you are brilliant and thank you so much – that works!

    I’m glad. Happy to do what I can.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to Decrease Font Size of Pull Quote’ is closed to new replies.