I am having trouble getting images to display properly in my Shopify Blog posts.
When I’m in the rich text editor, it looks descent. I double click to get the text to wrap around, select a resolution, and so on.
However, when I preview it on my website, it seems to size up the image and throw off the entire layout. The image also looks like a 250x250 image was brought up to a pixelated 1k.
After manually adjusting the size in the text editor, through the double-click image editor, and testing it in an empty post, it seems it always stays the same size in the preview, no matter what resolution you have.
Any thoughts on how to get these images to appear closer to what the rich text editor displays them as?
In the rich text editor you could click the ‘code’ button and set the style of the image using inline css (shown below using 250px as an example)
Using a set height and width will stop the image from scaling if the browser is resized, so you could switch those values to a percentage instead (replace 250px with 25%) and keep changing them until you get the desired size.
Hopefully this helps!
1 Like
Thanks! I’ll play with that solution right now. What about aligning them to center? Whether I align it with the rich text editor or the image editor window center align button, upon preview the image aligns left. Would something in the code be overriding the rich text or image editor alignment?
This is the code for the image, I think… I made the 100% adjustments to the width and height.
you might need to add !important after the margin css so it picks that over any other css so it should look like this :
