You are currently viewing Responsive Text Wrap in Elementor

Responsive Text Wrap in Elementor

How can you achieve responsive text wrap in Elementor?

affordable web designOn the face of it, this is a fairly simple thing to do.

Within the Text Editor Widget, you can insert media within your text area, like the picture on the right. In the editor window, if you select the image, you get the option of aligning it left, centre or right. Or you can choose no alignment at all.

This particular image is aligned to the right, which means that it floats to the right of the paragraph and as you write more and more text, that text will wrap around the image.

The ProblemĀ 

The problem arises when you view the embedded image on a mobile device. Read this post on a mobile device to see what I mean. (Alternatively, you could grab the corner of your browser window and drag it to make the window smaller.) You can see that the image size stays the same at 300 pixels and the text to the left of it gets narrower. When it gets to the width of one or two words, then it becomes difficult to read.

The Solution

affordable web designThe solution to achieve responsive text wrap in Elementor is to assign a class to the image, then write some additional CSS for that class.

If you select the image and edit it, then select Advanced Options, you will see a field “Image CSS Class”. Enter the class name that you can later refer to in the Additional CSS section of your theme. In this example I have used the class name “mobile-friendly”.

Then I have added the following additional CSS:

@media (max-width:600px) {
.mobile-friendly {width:50%;}
}

The normal width of the image is 300 pixels. What this CSS does is change that width to 50% of the viewport for screen sizes below 600 pixels.

Take a look at this post on a mobile to see what I mean, or grab the corner of the browser to make the window smaller.

Now you can see just how to make responsive text wrap in Elemenetor.

Leave a Reply