This article will show you how to set up images in your Page Editor to become mobile-responsive. This means that they will display correctly on mobile devices, as well as on desktop displays.
Who can use this feature?
- 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, then follow the below instructions.
- Navigate to your desired page
- Ensure that Live Edit is On
- Add an Editor Widget to your page
- Note: If you already have an Editor Widget on the page, just click inside of it.
- Add text to the editor
- Note: This text is temporary, it does not matter what you put. This text will simply help with the formatting later.
- Decide where to put your image and select the Insert Image tool in the toolbar
- Note: As a best practice, you should always insert images at the beginning of a paragraph.
- Click Insert next to the image you wish to add
- Click on the image
- In the image toolbar, select Display > Inline
- Note: This will cause text to wrap around the image and prevent large gaps.
- Use the Align tool to either place your image on the Left, Center, or Right side
- Click on the Change Size tool
- 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.
- Click Update
- Click the checkmark to escape the editor
- Click Save at the top of the page
- Note: Ensure that you delete your text if it is temporary.
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 (px). Images with a pixel size will not be mobile responsive. If you accidentally do this or want the image larger or smaller, please repeat steps 6 and 7.