Text Width: Wide Creates Issues with Right/Left Aligned Images

Hello,

We’re having trouble replicating your issue.

Are you having trouble with left / right aligned image blocks or are you talking about inline images and if so, what are you doing to align them exactly?

Also, with regards to setting the width of entry-content, how are you doing this? If you are using our plugin then it will compensate for left / right aligned image blocks I believe but if you are using custom CSS in “Customizer – Additional CSS” or something similar then the plugin will not be able to generate the required CSS to compensate as it will not know what width you have set to the content.

Hope that makes sense?

Thanks,

Oliver

Hello! Thank you for the prompt reply!

You can see the issue in action at a junk domain I set up to test things: https://highmotivationdiet.com/

Here’s how it was created:

1. Installed Twenty Twenty theme on WordPress.
2. No additional CSS, just installed the Twenty Twenty Options plugin.
3. Went to Customize and changed two things:
1. General Options – Force Full Width Template (pages and posts).
2. Content Options – Content Width 1000rem (or full width 100%). The actual setting doesn’t seem to matter.
4. Publish.

The width of the TEXT does indeed follow the Content Options change. Nice!

I created post with the Classic Editor and inserted an image, made it right-aligned. That’s the “Test Post with Right Align Image”

On the main/index page if you widen your web browser window beyond around 1000 pixels or so the chicken image begins to overlap the text. When the window is less that 1000px wide text wraps fine.

Note: When you visit the actual post page (single) the text wraps around the image just fine (it’s using the Full Width Template). Everything works as expected.

The issue is ONLY visible on the main/index page when it’s listing multiple posts.

A few other people on the WordPress forums have come across the same issue with Twenty Twenty. It’s not really a flaw in your plug-in (I’m guessing you’re just adjusting the width of .entry-content) but there is something else that needs to be changed somewhere for everything to play together nicely on the same page.

• This reply was modified 4 years ago by tomk414.
• This reply was modified 4 years ago by tomk414.

OK, I didn’t realise you were using the classic editor. Anyway, can you please try this CSS to see if it fixes the “right aligned image off the page in the classic editor” issue …

@media (min-width: 660px) {
.entry-content > p .alignright, .entry-content > .wp-block-image .alignright {
margin-right: 0.3rem 0 2rem 2rem;
}
}

The second problem with the image appearing too far to the right should be addressed by adding padding (as has been done with the text to the left) …

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
padding: 4rem;
}

Try adding these to your “Customizer – Additional CSS” and let me know if they make a difference?

If so we’ll look at adding the to the next update (for both left and right aligned images).

Oliver

Oliver,

I appreciate the help. Hmm. I pasted those two blocks into additional CSS and they didn’t really seem to make a difference.

Thanks anyway…

Sorry! My bad, that first one should have been …

@media (min-width: 660px) {
.entry-content > p .alignright, .entry-content > .wp-block-image .alignright {
margin-right: 0;
}
}

I can see the second bit of CSS is working as I expected.

Oliver

Hmm. I still don’t see a difference. The right-aligned image still overlaps the text. Here’s my total additional CSS:

@media (min-width: 660px) {
.entry-content > p .alignright, .entry-content > .wp-block-image .alignright {
margin-right: 0;
}
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
padding: 4rem;
}

Now that the image is visible in the flow of text I can see what the problem is ??

Add this …

@media (min-width: 1000px) {
.entry-content > .alignright, .entry-content > p .alignright, .entry-content > .wp-block-image .alignright, [class*="__inner-container"] > .alignright {
position: static;
}
}

The theme is making the image’s position absolute which is why text is flowing behind it.

I think what’s happened is that the theme developers are concentrating on using Gutenberg rather than the classic editor so they aren’t imagining that images are going to be aligned in this way within the normal flow of text.

These CSS changes may well break stuff in Gutenberg so I’ll need to drill down a more solid fix.

Let me know if this does the trick first though.

Thanks,

Oliver

You, sir, are a wizard! Yep, that seemed to do it!

I can appreciate the designers not considering the Classic Editor, but the Media & Text block is a poor substitute for simply having text dynamically wrap around images on a page.

I appreciate your effort and patience with this problem and as a way of saying thanks I’ve purchased the Twenty Twenty Premium plug-in. Thank you!

That’s marvellous news. I will keep an eye on this thread and if anyone else is struggling with this issue we’ll add it as a feature of the plugin.

And thank you for your purchase! Due to WordPress forum rules we cannot talk about the premium plugin in this forum though.

Oliver