Text Wrapping in Editor not Matching Website View

Question

I am wanting to wrap text around my image in Wordpress. I am using the latest update and I click on the image, align it left or right and it looks good in the editor. When I preview my site the text is not wrapping fully around it as it was shown in the editor. See photos. I do not know much about CSS but, I have tried searching forums and i inserted this

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

in "additional CSS" under Appearance customizer. Nothing changed once adding in this code.

Any help would be great, I don't understand the difference between what the editor shows and the actual website.

Answer 1

This is a common occurence. Many themes provide front-end styles that they don't enqueue in the Editor, so what shows on the front end of the website doesn't exactly match what's in the Editor. The Block Editor has brought the Editor much closer to the front end view, but they'll likely never be quite exactly the same.

"Additional CSS" is the correct place to add CSS to adjust only the front end. However, the specific code you selected is outdated, meant for the Classic Editor. To affect an image in the Block Editor you're using, you would need to use

.alignright img { }

instead of

img.alignright. It also looks from the screenshot like you may need to tweak the paragraph styles, not just the image styles. Most likely either the image is not floated, in which case you could try

.alignright img { float:right; }

or the paragraphs are cleared, in which case you could try

p { clear:none; }

but it will all depend on how your theme has structured their CSS. They may use more specific styles, or different layout types. You'll likely need to read up on CSS and inspecting elements to determine what CSS will make the layout look the way you want. Alternatively, you could try other themes to see if there's one that more closely matches the Editor.