How to wrap text around images in Oxygen

alignleft, alignright and aligncenter classes can be added on images to wrap text or to center the images.

Let’s see how these can be applied in the Oxygen‘s editor.

Step 1

Add this CSS sitewide:

img.alignright { float: right; margin: 0 0 2em 2em; }
img.alignleft { float: left; margin: 0 2em 2em 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; }

@media only screen and (max-width: 600px) {

img.alignleft,
.alignleft,
img.alignright,
.alignright {
float: none;
margin-right: 0;
}

}

This can be done in several ways. Here are two popular methods:

Method 1:

With Oxygen editor open, click on Manage, then Stylesheets.

Create/edit the stylesheet and add your CSS over there.

Method 2:

In the WordPress dashboard, go to Appearance > Customize > Additional CSS and add the code in there.

Step 2

Add a Div having your image and the text.

Select the Div. Go to Advanced > Layout and select block.

Select the image and give it a class of alignleft or alignright.

That’s it. You should immediately see the text wrap around the image.