[Resolved] Lists within block quotes don't inherit the style

[Melanie Jongsma]

I defined a style for block quotes on my site by adding this CSS:
/*Block quote*/
blockquote {
background: #fff;
-webkit-box-shadow: 5px 5px 5px 5px #d2d2d2;
box-shadow: 5px 5px 10px 0px #d2d2d2;

}

blockquote p {
font-family: courier, serif;
font-style: normal;
font-size: 16px;
color: #000;
}

Most of the time this looks great, but when I include an ordered or unordered list in my block quote, the style of the list is wonky—the text is in a different font, it’s larger, and it’s italic.

I don’t know enough about CSS or HTML to know where to even try to adjust list styles, within a block quote or in regular text. And I don’t know if the adjustment needs to be made to the list style or the block quote style.

I’d appreciate any help figuring this out.

[Leo]

Hi there,

Can you guide me to a page/post where I can see the issue?

[Melanie Jongsma]

Here’s one I just published:
https://www.thelansingjournal.com/news/2020/05/01/a-may-1-message-from-lansing-mayor-patty-eidam/

You’ll have to scroll down a little to see the unordered lists.

As I was looking for other samples, I also noticed that any text I put in h3 tags also turns italic and is not courier.

[Leo]

Sorry I’m a little bit confused.

You want the entire page content to wrap in <blockquote>?

What style would you like for the list?

[Melanie Jongsma]

I want the entire statement from the mayor to be in blockquote tags, which it is. What I don’t understand is why the style of the text changes whenever it’s wrapped in a tag within the block quote tag. In other words, my are my lists not in the courier font, like the rest of the blockquote? Why are they italic?

When I do a list in a regular post, not a blockquote, the font stays the same as the rest of the post.

[David]

Hi there,

try this CSS instead:

blockquote {
    background: #fff;
    -webkit-box-shadow: 5px 5px 5px 5px #d2d2d2;
    box-shadow: 5px 5px 10px 0px #d2d2d2;
    font-family: courier, serif;
    font-style: normal;
    font-size: 16px;
    color: #000;
}

Both the Paragraph and the list will inherit these styles now.

[Melanie Jongsma]

Hey, that worked! It looks great! Thank you so much!

[David]

You’re welcome

[Author]

Posts