Image wrapping issue on some mobile devices

[flyinjam]

Hi,

I'm having an issue with some mobile screen sizes and the way it displays a photo and text. In my posts, I usually have a square image halfway through the article which is left aligned. On desktop this displays the image to the left with text wrapped around it, and on most mobile devices this displays as the image and then the text underneath which is what I want. However, on some mobile devices such as pixel 2/3 or iphone 9, for example, the image sometimes displays with a couple of smaller words to the right of the image instead of underneath. Please see the example below or test with the page url below.

Is there a way to stop this happening?

https://www.vinylchapters.com/robertas-semeniukas-backstage-stories-review/

[Victor Font]

You'll have to add code to center the image at the breakpoints for the mobile sizes. I can't tell you how because autoptimize prevents us from examining the CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[flyinjam]

Hi Victor, thanks for replying. I'll try to contact Autoptimize support to see if they can provide an answer. If they do reply with a solution, do you want me to let you know what it is?

Thanks!

[flyinjam]

Hi Victor,

I actually got a very fast reply off their support, but they said to come back to you and you might be able to give me a solution with the information they gave me in the screen print below! Can you take a look and let me know if anything can be done? Thanks!

[Anita]

@flyinjam This isn't really "theme" support per se. It's block related. You're using an image size "medium" which is 300px x 300px with an image block and it's floating left. So you need to add "custom" CSS at that mobile break point to remove the left float.

.wp-block-image .alignleft {
    float: none;
}

If you use Responsinator as a guide - http://www.responsinator.com/?url=https%3A%2F%2Fwww.vinylchapters.com%2Frobertas-semeniukas-backstage-stories-review%2F, you can see that you will need it on breakpoints 414px or smaller. I recommend adding that CSS to your 480px media query in your stylesheet. However, it looks like it's been removed, so you'll need to add it back.

---

Love coffee, chocolate and my Bella!

[flyinjam]

Thanks for the help Anita, much appreciated. I'll give it a go.

[Author]

Posts