Skip to main content

Search

How Do I Create Mobile-Responsive Images?

Jackson Wright
  • Updated

Who can use this feature?

System Admin Slash Owner Slash Publisher

 

 

Overview

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. 

 

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 is on
  3. Add an Editor Widget to your page
    drag-and-drop editor widget
    • Note: If you already have an Editor Widget on the page, just click inside of it.
  4. Add text to the editor
    add text
    • 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 tool
    • 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
  7. Click on the image
    click on image
  8. In the image toolbar, select Display > Inline
    display inline
    • 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
    alignment options
  10. Click on the Change Size tool
    change size tool
  11. Set the Width attribute as a percentage (%)
    change size width
    • 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.
  12. Click Update
    change size update
  13. Click the checkmark to escape the editor
    green checkbox
  14. Click Save at the top of the page
    save
    • 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 and 7.

Comments

Let us know what was helpful or not helpful about the article.

3 comments

Date Votes
  • Michael Jacoby

    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

    0
  • Becca Drake

    Hi Michael,

    Thank you for that feedback. We have adjusted the article to reflect your observation.

    Thanks,
    Your Help Center Team

    0
  • Carlos Oyola-Negron

    How would we do this for banners?

    0

Please sign in to leave a comment.