How to Adjust Images for Responsive Web Design
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!
Tags
Most Recent
Webinar: Seeing Your Website With Fresh Eyes
May 11, 2023
Preparing Your Web Presence for Great Lent, Holy Week, and Pascha
February 8, 2023
Webinar: File and Image Optimization
January 27, 2023
Optimizing Images for the Web
January 19, 2023
Getting Started with cPanel
April 26, 2022
Keeping Track of Website Resource Usage
April 26, 2022
Getting Started with Awstats
April 26, 2022
Adding Online Donations to Our Website
September 13, 2021
Registering your Website with Search Engines
May 14, 2021
|
Most Popular
Optimizing Images for the Web
481 Views
Adding Online Donations to Our Website
395 Views
Webinar: File and Image Optimization
377 Views
Purchasing a Domain Name
366 Views
Making Forms More Secure with Recaptcha
280 Views
|