[PicciaNeriParticipant]

Hello, this is how I have styled the CSS for my blockquotes:

blockquote {font-family: “Quarto A”, “Quarto B” !important;
font-style: italic !important; margin-top: 0 !important; letter-spacing: 0 !important; padding: 30px 0 30px 40px; border-left: 4px solid #050506;}

It shows fine in the front end in the inspector. However, the CSS is not working, because the content of the blockquote gets wrapped in a <p> tag. It also seems to add an inline style for 40px top margin that I never put there.

Can you please help? I have no way of correcting this as the blockquote is correctly tagged in the back end.

You can check for yourselves here:
http://www.staging1.piccianeri.com/colour-part-3-the-huge-importance-of-understanding-the-colour-wheel-for-a-dramatic-improvement-of-the-impact-of-your-designs/

I am also attaching screen grabs.

Many thanks

[JoaoModerator]

Hi Piccia,

I Could not check your page because it is not published yet.

Please try adding the following code to Appereance > Customizer > Custom > CSS or Cornerstons > Settings > Custom > CSS

blockquote p {
font-family: “Quarto A”, “Quarto B” !important;
font-style: italic !important;
 margin-top: 0 !important;
letter-spacing: 0 !important;
padding: 30px 0 30px 40px; 
border-left: 4px solid #050506;
}

Let us know how it goes,

If that does not work please provide your credentials or publish the page in order that we can take a closer look.

Thanks

Joao

[PicciaNeriParticipant]

Thank you Joao, that did work. Just a quick question: is it normal that the contents of a blockquote should be wrapped in a p tag?

[FriechModerator]

Hi There,

No it should not, did you copy and paste that content? It seems you get that tag from where it was copied. Try pasting your content on a text editor first then clean and arrange it before you paste it on your page.

Thanks.

[PicciaNeriParticipant]

Thanks, but that doesn’t help at all. It keeps happening and the tag is NOT from where it was copied: it wasn’t copied, it was written directly in the text editor (not visual) in WordPress, and it’s only wrapped in the blockquote tag. It’s very frustrating, it happens randomly also in other posts and I don’t know what to do.

[PicciaNeriParticipant]

Sorry, I didn’t mean ‘doesn’t help at all’ – came out too harsh, I only mean that that’s not the case, I am not copying formatted text. Apologies!

[PicciaNeriParticipant]

See in this post, for instance:

http://www.staging1.piccianeri.com/reasons-why-wordpress-site-needs-worry-free-maintenance-plan/

It happens here too. The blockquote is 100% clear. All tags are properly placed. There is no open tag. I have moved the quote somewhere else on the page, and the CSS is applied, it looks the way a blockquote should. I move it again, placing it where I want it, and the CSS isn’t applied properly. EVEN though all tags are absolutely opened and closed and all text is cleaned and un-formatted.

[PicciaNeriParticipant]

This is a problem because with the new CSS i.e. targeting blockquote p all blockquotes that don’t suffer from this bug are improperly styled, so I have to manually wrap them in a p tag. Can’t really do that site-wide!

[PicciaNeriParticipant]

You can see on the post I mention above http://www.staging1.piccianeri.com/reasons-why-wordpress-site-needs-worry-free-maintenance-plan/

Exactly the same quote is inserted at the end of a correctly closed ordered list, in the text editor, correctly only wrapped in blockquote tags, and it looks utterly wrong because it’s got the p tags only in the front end, not at all in the back end, screenshot at 17.43.

Exact same quote is pasted towards the bottom of the post, in between two paragraphs, still in the text editor, and this time it looks a-ok even though in the back end everything is absolutely the same – screenshot 17.46.

Any idea why this could happen? Trying to sort this out is such a silly way to waste time.

Many thanks

[JoaoModerator]

Hi There,

Please add the following code instead to target both blockquotes:

blockquote p, blockquote  {
font-family: “Quarto A”, “Quarto B” !important;
font-style: italic !important;
 margin-top: 0 !important;
letter-spacing: 0 !important;
padding: 30px 0 30px 40px; 
border-left: 4px solid #050506;
}

Hope that helps,

Joao

[Author]

Posts