Help with misbehaving blockquotes

[tatami]

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.

http://www.aenigma-images.com

[Author]

Posts