With a responsive web design, the template is coded to respond to the environment and window size in which the website is being viewed. So, you only have to maintain a single site and set of content in order to have a site that looks great and works well for both your desktop users and your mobile users (phones, tablets, etc.).

Internet Ministries has taken care of the template for you, and in most circumstances, your content should be all set too. However, there will be times where there is an image within your content that has a fixed width set which causes that image to break out of its containing column and overlap other content.

(Example 1: A site where the image has not been adjusted to work in a responsive design)

In just a few steps, you'll learn how to quickly and easily clean up the images on your site to work in a responsive design.

1) Log into the MODX manager

2) Edit the Resource (page) that contains the image that is not appearing correctly.

3) Click once on your image and then click once on the "Insert / Edit Image" button in your HTML editor

4) Click on the Appearance Tab

5) Now, you have two choices:

a) (For advanced users) Manually type in the following CSS override in the Style text box at the bottom of the page:
width: 100%; height: auto;
You can use a percentage that is smaller than 100% for the width, but the height should always be "auto"

b) (Recommended choice) Use one of the built-in classes in the Class pulldown menu. The classes that will work for images are defined as follows:

Images That will Float to the Left
img_left	No size adjustment, with border
img_left_25	25% of the column width, with border
img_left_50	50% of the column width, with border
img_left_75	75% of the column width, with border
img_left_no_border	No size adjustment, no border
Images That will Float to the Right
img_right	No size adjustment, with border
img_right_25	25% of the column width, with border
img_right_50	50% of the column width, with border
img_right_75	75% of the column width, with border
img_right_no_border	No size adjustment, no border
Centered Images
img_center	No size adjustment, with border
img_center_25	25% of the column width, with border
img_center_50	50% of the column width, with border
img_center_75	75% of the column width, with border
img_center_95	95% of the column width, with border
img_center_no_border	100% of the column width, no border

 

6) Click the Update Button, and the click Save to save your changes and further improve your already amazing website!