Live Edit


 





Create Mobile-Responsive Images

Who can use this feature?

System_Admin.pngSlash.pngOwner.pngSlash.pngPublisher.png

 

Overview

This article will show you how to setup 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.

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

  1. Navigate to your desired page
  2. Ensure that Live Edit is On
    live_edit.png
  3. Add an Editor Widget to your page
    editor_widget.png
    • Note: If you already have an Editor Widget on the page, just click inside of it.
  4. Add text to the editor
    editor_text.png
    • Note: This text is temporary, it does not matter what you put. This text will simply help with formatting later.
  5. Decide where to put your image and select the Insert Image tool in the toolbar
    insert_image.png
    • Note: As a best practice, you should always insert images at the beginning of a paragraph.
  6. Click Insert next to the image you wish to add
    insert.png
  7. Click on the image
    click_image.png
  8. In the image toolbar, select Display > Inline
    inline.png
    • Note: This will cause text to wrap around the image and prevent large gaps.
  9. Use the Align tool to either place your image on the Left, Center, or Right side
    align.png
  10. Click on the Change Size tool
    change_size.png
  11. Set the Width attribute as a percentage (%)
    width.png
    • Note: This percentage should reflect how much of the container’s width you want the image to take up at maximum. Small images will not stretch to fill this amount, but images that are larger than this percentage will scale down.
    • Note: You must include the % sign.
  12. Click Update
    update.png
  13. Click the Checkmark to escape the editor
    checkmark.png
  14. Click Save at the top of the page
    save.png
    • 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 it a 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 & 7.




I'd Like to Request an Enhancement

1 out of 1 found this helpful

Updated:
Follow

Article Feedback