Threshold to stop wrapping text around image?

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Here's one example. Just below the "Symptoms" heading starts a series of pictures on the right. The second and later all have a clear_right class so the pics don't sit next to each other.

Look at the second and later photos, the ones all the same width. It looks fine wide, but as the window gets narrow, first the wrapped text starts to look bad, then portions of it drop down below the pics. Eventually there's only one line wrapped. Also watch the heading "Distribution and Damage". At one point you can see it break in two, one part remaining wrapped and the rest dropping down.
https://forestpathology.org/root-diseases/big-pocket/

Here's a simpler example with one pic and no clear_right. See the pic of man with tree below the heading "Multiple Decline Concepts". Again, as window gets smaller, it starts to look bad, then part of the text drops below and the rest stays wrapped.
https://forestpathology.org/decline-diseases/

Hmm this isn't normal behaviour.

Can you disable WP optimize to test?

Thanks. I deactivated WP-Optimize and checked those pages again - no change. Then I reactivated it - not sure if you meant you wanted to test.

I deactivated WP-Optimize and checked those pages again - no change. Then I reactivated it - not sure if you meant you wanted to test yourself.

Can you deactivate all plugins except GP Premium and let me have a look?

Thanks :)

Yes. Please see private info. It doesn't seem to make any difference.

Hi there,

you could do a couple of things with some CSS:

/* limit image width to 50% of viewport */
.wp-block-image figure.alignright {
    max-width: 50vw;
}
/* On smaller screens stack the images */
@media(max-width: 768px) {
    .wp-block-image.clear_right,
    .wp-block-image figure.alignright {
        float: none;
        margin: 0;
        max-width: unset;
        width: 100%;
    }
    .wp-block-image figure.alignright img {
        width: 100%;
    }
}

Thanks, but I'm a bit confused. Yesterday Leo said this was not normal behavior. I don't know what normal behavior is. Could you link me to a GP site that has text wrapping around images and works normally?

If mine is not normal, I'd rather find out why than work around it.

Floats behaviour can be unpredictable depending on the content around it - for example on this post:

https://forestpathology.org/decline-diseases/

When the screen is narrowed it comes a point where the word 'acknowledging' is too wide to fill the remaining space and falls below the image. To stop that from happening would require the word to break and become hyphenated which is not pretty.

The solution i provided is the best way to fix that.

Ok, so it sounds like what I'm seeing is normal behavior after all? I'll try that css and see how it goes.

I would prefer to say yes, you're seeing the 'weird' behaviour of floats :)
Let us know how the CSS works for you.

I don't know why, but each of those two css rules, individually and together, cause a critical error. I double checked the semicolons and braces, all seems right. Strange.

It's got to be something I screwed up elsewhere in functions.php. I'll work on it.

DOH! Finally realized I was putting CSS in functions.php!

Yep - that will break it :)
Glad to hear you found the issue - did this CSS resolve the narrowing text problem ?