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.enter image description here

enter image description here


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.

| improve this answer | |
  • Thank you for the help! Unfortunately, adding those codes seemed to make no difference so I will just have to keep reading and fumbling my way through this website stuff! – JACOB FERRO Mar 11 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.