Site logo

Archived topic

Text not wrapping images

8 replies · Started by ballerinamoose on June 14, 2021

Viewing posts 1–9 of 9

Hi,

I have an old site that I've just updated to GP. I've updated posts to use Gutenberg blocks instead of Classic blocks, and I've applied the Tasty sample site settings.

Unfortunately, I'm finding that my text isn't wrapping around inline images that are justified right or left. Sample page in the private info box.

Any ideas?

Thank you for your help.

Hm, on further inspection, it appears to affect only the first image (not the featured image) in the post.

Moving it to below the first paragraph didn't seem to make a difference.

Yes, that's exactly what I'm going for, but adding the CSS didn't seem to make any difference.

I added this code:

img.alignright {
float: right;
}

img.alignleft {
float: left;
}

But if you take a look at the page in the private info box, it looks the same with or without it. All the images further down the page display fine with or without that CSS added--it's just something weird about the first image only.

Thank you!

That CSS won't work because the img element is wrapped with a <div class="wp-block-image"><figure class=".."> .. </figure> </div> element.

float property will only work if it is applied to the sibling element of the <p>, which is <div class="wp-block-image">, the wrapping element for the image block.

I'm sorry, could you please tell me exactly what I need to put in my CSS to make this work?

Also, why is it only affecting the first image on the page? All the others are correct without any CSS edits.

Hi Lashelle,

It's because you have this code block underneath the image block, it's stopping the paragraph to wrap around.
https://www.screencast.com/t/ts7YS8VkI

Could you try to remove the code block to test?

Let me know :)

Ying, thank you! That was the culprit. All is working as expected now.

Thank you so much for your help! :)

You are very welcome :)

This archived topic is closed to new replies.