This article will show you how to set up images in Editor widgets to be mobile-responsive. This means that they will display correctly on mobile devices as well as on desktop displays.
Important Note:
The Image Widget is always the first recommended choice if you need to add images to your page. However, if you need to "float" images in the Editor Widget, be sure to use the following instructions.
Who can use this feature?
System Administrators | Owners | Publishers | Authors
Instructions
Navigate to your desired page
Ensure that the Live Edit state is toggled to ON:
Add an Editor Widget to your page:
Note: If you already have an Editor Widget on the page, click inside it to begin editing.
Decide where to put your image by placing your cursor at the location. Then click the Insert Image button in the toolbar:
Note: As a best practice, you should always insert images at the beginning of a paragraph.
Click the Insert button next to the image you wish to add:
Click on the inserted image to open the Image Options toolbar:
In the Image Options toolbar, click the Display dropdown menu and choose the Inline option:
Note: This will cause text to wrap around the image and prevent large gaps.
Use the Align dropdown menu to set the image's alignment to Left, Center, or Right:
Click the Change Size button:
Set the Width attribute as a percentage (%):
Note: This percentage should reflect how much of the container’s width you want the image to take up at maximum. Small images will stretch if they do not fit the container, and the quality of the image may decrease. You must include the % sign.
Click Update to finish your width attribute changes:
Click the Done Editing button to exit the Editor widget:
Click the Save button:
Note: Do not click on the sides or corners of the image! This will manually resize the image and cause the editor to assign its size in pixels. Images with a pixel size are not mobile-responsive. If you accidentally do this or want to change the display size of the image, please repeat steps 6 and 7.