Blockquote format

nataliehanson · Member · April 24, 2017 at 11:12 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
nataliehanson · Member · April 24, 2017 at 11:13 pm
Copy link
Sorry, somehow it appended the wrong blog – I am looking for help with nataliehanson.com.
staff-therezzap · Staff · April 25, 2017 at 10:06 am
Copy link
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
nataliehanson · Member · April 29, 2017 at 12:47 am
Copy link
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?
nataliehanson · Member · April 29, 2017 at 2:20 pm
Copy link
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.
nataliehanson · Member · April 30, 2017 at 11:05 pm
Copy link
Here is a link to what it looks like in the editor view:
staff-therezzap · Staff · May 1, 2017 at 1:20 pm
Copy link
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
nataliehanson · Member · May 1, 2017 at 10:31 pm
Copy link
Great – so close! How do I make the text flush left?
nataliehanson · Member · May 1, 2017 at 10:34 pm
Copy link
Is there any way to keep it from overlapping with images, or is that the expected behavior? https://nataliehanson.com/about/autoimmunity-health/
staff-therezzap · Staff · May 2, 2017 at 12:22 pm
Copy link
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
nataliehanson · Member · May 3, 2017 at 2:45 pm
Copy link
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?
staff-therezzap · Staff · May 3, 2017 at 5:38 pm
Copy link
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.

WordPress.com forums

Blockquote format