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!
Маркери
Последно
Website Costs - the Good, the Bad, and the Ugly!
04 Януари 24
Getting Started with Awstats
21 Декември 23
Getting Started with cPanel
21 Декември 23
Webinar: File and Image Optimization
27 Януари 23
Optimizing Images for the Web
19 Януари 23
Keeping Track of Website Resource Usage
26 Април 22
Adding Online Donations to Our Website
13 Септември 21
|
Най-популярни
Getting Started with Awstats
26960 Изгледи
Webinar: File and Image Optimization
5047 Изгледи
Getting Started with cPanel
4424 Изгледи
Optimizing Images for the Web
4382 Изгледи
Adding Online Donations to Our Website
3108 Изгледи
Displaying PDFs as a Flip Book
2828 Изгледи
SSL Certificates for your Website
2637 Изгледи
Purchasing a Domain Name
2583 Изгледи
|