Looking for something?

How do I make CMS images responsive?

Images loaded into the CMS pages can be updated to be responsive so that they resize automatically when the page visitor is viewing the site on a tablet or smart phone.

To do this, first set-up your CMS page and load the images. The image properties will automatically be set in the source code, based on the properties of the image loaded. Note that the images should be created in the correct dimensions you require for that page in the desktop layout.

Once the CMS page content has been created and linked to the site, the page will look similar to the one below when viewed on the desktop.



When the same page is viewed on a smart phone, you'll notice that the images are still displayed at full width and are not responsive. See the image below.



To update the images to be responsive, locate the CMS page, click on 'View' in the editor and select 'Source Code'. I suggest testing this on a test page with one image first if you are not familiar with HTML.


Locate the code for the image and update the 'img style' html.


In the code for the 'img style', remove the height and width and then set the width to 100%. The html should look like this “width: 100%”.

Make sure you don't change anything else and you leave the trailing semi colon. Once updated, the page should look like this on a smart phone.



Note that updating images to be responsive will also be dependent on the page layout. Images within tables may not resize correctly depending on other content within the table.







Let us know if this information has been helpful.
We'd love to hear your feedback!

1 out of 1 found this helpful
Have more questions? Submit a request


Powered by Zendesk