Prevent left or right aligned images running outside text area

Hi @andynick! You can edit the ‘Page’ template by going to the site editor, and put your ‘Content’ block inside a group block. You might need to unlock the content block to be able to move it around first. I’ve recorded the steps in the video below:

Thank you @properlypurple. Unfortunately that didn’t work.
The Content block was already inside a Group block, but I followed your instructions to be sure I had done it correctly, and it made no difference.
Why on earth the content doesn’t stay within the specified width of a Group block, I do not understand.
An example of what I mean is on this link (make the browser window wide to see what I mean) although I will edit it within a few days.

Hey @andynick! I was able to use a group block around the content block for this.

Can you try adding your content, or just the images, inside a group block when editing just one post, and tell me if that makes a difference?

Having the same problem. Really weird! Did someone find a solution yet? In another thread I found some CSS, but it didn’t make a difference for me:

.wp-block-image.alignright img,
.wp-block-image.alignleft img{
height:auto;
max-width:100%;
}

My apologies to @properlypurple – I should have responded to their last comment, because when I nested the content inside a group block within the editor, the problem went away.
I don’t understand why it didn’t work the first time I tried it, but it’s worked perfectly ever since.

Hi @properlypurple and thanks for your suggestion, which I’ve used.

I’m having difficulty understanding the effect of “Inner blocks use content width”.

It can be toggled off,
It can be toggled on but no content/wide values given,
It can be toggled on and content/wide values given.

I can’t find any explanation of the difference between the 2nd and 3rd case. Using Twenty Twenty-Four theme and the Pages template as supplied (the parent of the content block has “Inner Blocks use…” toggled off), image blocks with “Align Left” align to the left of the window, and paragraph blocks align to the narrower content block margins, as @andynick says in the 1st post. Set the containing block to “Inner Blocks use…” on but leave Content and Wide left blank as @properlypurple suggests, and images align with paras, and the para text wraps round the image. Perfect!

But if you put a value for the Content and Wide in the containing block, say 100%, the image is way out left again.

What is happening? Why do Image blocks and Paragraph blocks interpret widths differently?

Thanks for any help in understanding this.

Hey @simongarrett ! As I understand, the ‘content width’ is supposed to be a width at which you can set your text content to be easily readable. This is why it’s quite narrow, and is interpreted this way. The images that break out of this is a stylistic choice, and not all themes would make a choice to display images hanging outside the content area. I hope this clarifies why this is like this.

Thanks, noted.

I’d assumed that alignment of image and para blocks would be universal, set (for all blocks) by content width, and not set differently according to the block. That doesn’t seem to be the case.