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?
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, then follow the below instructions.
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.
Feedback About the Article
Let us know what was helpful or not helpful about the article below.4 comments
Hello, your note on step 11 says 'Small images will not stretch to fill this amount'. This is incorrect. They will stretch. Perhaps change the note to say they should be aware that small images will stretch and the quality of the image may decrease
Hi Michael,
Thank you for that feedback. We have adjusted the article to reflect your observation.
Thanks,
Your Help Center Team
How would we do this for banners?
How can we get images to stack? With both Image and Editor widgets, text will get very very narrow when next to an image on mobile viewports. Stacking side-by-side content/widgets as viewport decreases seems like it would be a default functionality.
Playing with percentages can work great for an image without text around it, but doesn't play well between desktop and mobile with text around it...you may want an image to only take 20% of a viewport on desktop but then it is miniscule on mobile.
Please sign in to leave a comment.