Archived topic
Text not wrapping images
8 replies · Started by ballerinamoose on June 14, 2021
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.
Hi there,
Are you aiming for something like this?
https://share.getcloudapp.com/jkuPDRAo
Here's a way to go about it:
We can create utility classes to make images have float property.
Add this CSS:
.float-right{
float: right;
}
.float-left{
float: left;
}
You can then use float-right and float-left for your image blocks.
Example: - https://share.getcloudapp.com/nOuPnL40
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 :)