Image Wont Wrap Around Text

Ask & Offer
1

Hello and thank you for taking the time to help me. I have inserted an image on a page and when i try to wrap the text around the image it wont. It shows that its resized and wrapped on the back end but when i look at the page on the web its a huge image and the text is centered and below the image. Here are two screen shots of what i am seeing.

  1. is what i am seeing on the back end
  2. is what is showing up on the web

you can see in phot 2 that the milk pitcher is so large i cant even get the full screen shot to show you. I have been trying to figer this out for the last few hours and i just cant. I even tried putting in a very small image to see if that would work or change the image size but no matter what i do i cant get it to work. any help would be great.

thanks

Harry

wrap code
wrap code742×446 65.8 KB

2

here is the second photo where you can see the what is showing on the web

wrap code web
wrap code web1060×601 64.7 KB

4

@HarryPulman This is normal behavior in Shopify and not a bug. The page editor preview can be confusing because, on the live site, most Shopify themes force images to show as full-width for mobile friendliness. This removes text wrapping and resizing, which is why the image looks very large on the page and the text appears below it, no matter what changes are made in the editor.

The best solution is to use a column layout placing the image in one column and the text in another using a custom section, Custom Liquid, or a page builder. Text wrapping can be forced with custom HTML and CSS, but it is not recommended because it usually causes display issues on mobile devices.

5

Hi @HarryPulman

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

6

Yes, the RTE editor in backend is just an approximation.

Real on-site display depends on your theme CSS and most themes are pretty opinionated here rather then trying to reproduce the backend content render.
And there are good reasons for this.

If you can share a link to your store and page in question (with preview password, if one is set), it would be possible to suggest a CSS code to make it look the way you want.

7

This is a great tip and it worked! thank you