[auntialias]

I know this is an old topic, but having just solved it, I'd like to share my solution as a way to pay it forward.

It's based on a discussion with a solution by Victor Font (see post for full explanation of Victor Font's solution:

.full-width-content img.pull-left,
.full-width-content figure.pull-left img {
	float: left;
	margin: 0 40px 40px -200px;
}

.full-width-content img.pull-left,
.full-width-content figure.pull-right img {
	float: right;
	margin: 0 -200px 40px 40px;
}

Victor's solution works when WordPress adds the custom style to the FIGURE element. But in the site I'm working on, when I selected the image block and applied the custom style pull-left to it, the style was applied to the DIV that contained the FIGURE. The styling would not apply.

The DIV already has a class of wp-block-image. I applied the styling to a div with a class of both wp-block-image AND pull-left, and wrote it like so:

.full-width-content .wp-block-image.pull-left

I added this as a third class to this section of CSS code:

.full-width-content img.pull-left,
.full-width-content figure.pull-left img,
.full-width-content .wp-block-image.pull-left {
	float: left;
	margin: 0 40px 40px -200px;
}

.full-width-content img.pull-left,
.full-width-content figure.pull-right img,
.full-width-content .wp-block-image.pull-right  {
	float: right;
	margin: 0 -200px 40px 40px;
}

[Author]

Posts