Set Images to Be Mobile-Responsive

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.

Instructions

1. Navigate to your desired page
2. Ensure that the Live Edit state is toggled to ON:
   
3. Add an Editor Widget to your page:
   
   
   Note: If you already have an Editor Widget on the page, click inside it to begin editing.
4. 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.
5. Click the Insert button next to the image you wish to add:
   
6. Click on the inserted image to open the Image Options toolbar:
   
7. 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.
8. Use the Align dropdown menu to set the image's alignment to Left, Center, or Right:
   
9. Click the Change Size button:
   
10. 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.
    
    Note: You must include the % sign.
11. Click Update to finish your width attribute changes:
    
12. Click the Done Editing button to exit the Editor widget:
    
13. Click the Save button: