Help with misbehaving blockquotes

  • I have not done any work on my website for quite a few months other than keep WordPress and plugins updated.

    Today, I tried to add an image to one of my posts. The image is aligned left and the blockquote to the right of it should indent accordingly. You can see how it appears by scrolling down to the quote opposite the first image here (please note, this post is on my staging site and you’ll need to be using a Mac/PC with quite a wide window) .

    Scroll down to compare that with the quote opposite the second image. Here, the quote appears as it should do – shifted over to the right together with the quotation mark. By contrast, while the quote opposite the first image has shifted over to the right, the quotation mark hasn’t.

    Existing layouts all appear to be fine, this happens only with items I add or change. I’m guessing that this is caused by some change in the block editor.

    I’m configuring quotes to the right of images by an additional CSS class: blockquote–right. It is defined like this:

    /* Correct blockquote being too close to image */
.blockquote--right,
.ul--right{
	position: relative;
  	left: 40px;
}

    Here is the rest of my blockquote CSS:

    /* Quotation mark before block quotes */
blockquote::before {
	content: "\201C";
  	color: #6b6b6b;
	display: block;
 	font-family: "oswald" !important;
	font-size: 70px;
	height: 0;
	left: -40px;
	position: relative;
	top: -20px;
}

/* Adjust block quotes */
blockquote {
  	color: #6b6b6b;  
  	display: block;
  	margin: 0px 15px 0 0 !important;
	padding: 0px 40px;
}

/* Option to wrap blockquotes around images */
.blockquote--flow {
    overflow: initial;
}

    Please could someone help me to understand what is causing the problem I’ve described and how to resolve it.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    I get an IP not found error with your staging site links. Staging sites are often not publicly accessible.

    Compare the HTML of a page where this is working against the one you have trouble with. If the tags involved do not match, the mismatch is probably the cause of the trouble. You either need to get the HTML to match, or get the working CSS to be applied to the new HTML.

    Thread Starter tatami3lri

    (@tatami3lri)

    Thank you for taking the time to read and respond to my request, @bcworkz. Stupidly, I gave an outdated link. The post I’d really appreciate you looking at is at here.

    Moderator bcworkz

    (@bcworkz)

    The blockquote--right class attribute for the problem pull quote is assigned to the wrong element. It’s assigned to the quote’s p tag instead of its blockquote tag. I’m not sure how you’d correct this using the normal editor tools and settings, but you could likely manually correct it using the editor’s code view.

    Thread Starter tatami3lri

    (@tatami3lri)

    I’m puzzled why the blockquote--right class attribute used to work but doesn’t now. And, as you can see, I’m really struggling here. I’ve opened the blockquote I need to configure in the code editor, as you suggested, and copied and pasted below:

    <!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:paragraph {"className":"blockquote\u002d\u002dright"} -->
<p class="blockquote--right">California manufacturers showing spring styles in Paris do not intend to copy the styles of Parisian couturiers or offer competition as a world style center. We manufacture sports and play clothes and day-long livable types and hope to buy from Paris accessories, ornaments and perhaps ideas for trends to add to our lines.</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

    Could you help me work out what code I need to add and where in order to get the quotation mark to align as it should?

    I realise I may be testing your patience and I’d really appreciate any insights you could offer me, @bcworkz .

    Moderator bcworkz

    (@bcworkz)

    The HTML needs to be like this:

    <!-- wp:quote -->
<blockquote class="wp-block-quote blockquote--right"><!-- wp:paragraph -->
<p>California manufacturers showing spring styles in Paris do not intend to copy the styles of Parisian couturiers or offer competition as a world style center. We manufacture sports and play clothes and day-long livable types and hope to buy from Paris accessories, ornaments and perhaps ideas for trends to add to our lines.</p>
<!-- /wp:paragraph --></blockquote>
<!-- /wp:quote -->

    This closely matches the HTML of other pull quotes that do display correctly.

    Thread Starter tatami3lri

    (@tatami3lri)

    Thank you once again, @bcworkz. I’ve opened the post in the code editor and pasted the code you’ve suggested. Unfortunately, the code itself is appearing on the rendered post. I suspect I’ve done something wrong here but I don’t know what. Should I be pasting the code into something other than WordPress’s code editor?

    Thread Starter tatami3lri

    (@tatami3lri)

    Okay, I’ve figured that this is a more complex issue to deal with than I’d originally anticipated. I’d assumed a small tweak to the CSS would do the trick but I think I was wrong. So I’m going to pay for someone to work with me on this. Thank you so much, @bcworkz, for your time and your insights. I really appreciate them.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Help with misbehaving blockquotes’ is closed to new replies.