Blockquote format

  • Author
    Posts
  • #109741

    Hi –

    I feel like the blockquote font is just too huge – it’s looking funny on the pages and blog posts:

    https://nataliehanson.com/2016/05/06/ux-art-science/
    https://nataliehanson.com/about/

    Is there a way to control this centrally? I’d like to reduce the font size, and make it a medium grey. Maybe also italic.

    If there is a site you can point me to so I can evaluate other formatting options, that would be great too.

    Thanks.

    The blog I need help with is zehansons.wordpress.com.

    #109862

    Sorry, somehow it appended the wrong blog – I am looking for help with nataliehanson.com.

    #109880

    rezzap
    Staff

    Hello!

    You can control the blockquote font with CSS:

    blockquote {
        font-size: 20px;
        font-style: italic;
        font-family: "Roboto";
    }

    I think something like that would look a bit better.

    Thanks!

    Rebecca

    #109993

    Thanks, this worked well:

    blockquote {
    font-size: 12px;
    color: darkgray;
    font-style: italic;
    font-family: “Roboto”
    }

    The only thing I can’t seem to do is decrease the font size. I tried 16 px and 12 px and the size didn’t change. Any ideas?

    #109994

    Another related question is whether I can have the blockquotes and links appear as they do in edit mode?

    In edit mode, the quotes are in a bluish grey box with a darker grey bar down the left side, and the links are turquoise. Both are more usable than the Profile default.

    I have a screenshot if needed, but don’t see a way to upload it here.

    #109996
    #110006

    rezzap
    Staff

    Hi Natalie,

    You can play around with the background and border on the blockquote with the following:

    blockquote p {
        background: #E6E7F0;
        border-left: 3px solid #CECFE2;
        padding: 10px;
        font-size: 0.9em;
    }

    Notice I also added the font-size in there, so try editing it there instead.

    Thanks!

    Rebecca

    #110019

    Great – so close! How do I make the text flush left?

    #110020

    Is there any way to keep it from overlapping with images, or is that the expected behavior? https://nataliehanson.com/about/autoimmunity-health/

    #110024

    rezzap
    Staff

    Hello,

    You can add the text-align feature as follows:

    blockquote p {
        text-align: left;
    }

    As for it overlapping with images, it’s pretty much the behaviour you’ll get. Alternatively it would display bellow the image leaving you with some extra white space between content and image. It’s probably better to try and re-arrange your image position/dimension than adjust this.

    Thanks!

    Rebecca

    #110028

    Ok thanks, good to know.

    The change seems to work on pages:
    https://nataliehanson.com/research/workplace-studies/

    But doesn’t seem to work on blog posts:
    https://nataliehanson.com/2015/05/10/i-have-hashimotos/

    Am I missing something?

    #110029

    rezzap
    Staff

    Try making sure your blockquote uses the paragraph tag. It looks like it’s working on the post when you have the p tag around the quote, but not when it’s not there. Compare your quotes here and you’ll see the difference: https://nataliehanson.com/2015/05/10/i-have-hashimotos/.

    Thanks!

    Rebecca

The topic ‘Blockquote format’ is closed to new replies.