Solved

one image replaces another on mobile site

Posted on 2013-12-05
7
230 Views
Last Modified: 2013-12-06
Client has a photo of 3 awards on home page.  He wants that image to also display on mobile site.  Problem is, that image is so wide, that it doesn't downsize nicely for mobile site.  Right now, I have the image set to display:none on the mobile css.  Is there a way to actually have it display but simply display much smaller?

http://nsitedesigns.com/nsitedesigns/wrb/index.html
http://nsitedesigns.com/nsitedesigns/wrb/css/screen_layout_small.css
http://screencast.com/t/YoZB2oq5X
0
Comment
Question by:nsitedesigns
  • 3
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
Two options.  You can use CSS to set the width in pixels.  Do not specify a height and the browser will calculate the value need to retain the aspect ration.  You cannot use percentage; it must be in pixel to work correctly.

The other option is to set it as the background of an element which will allow percentage dimensions; but that can cause distortion.

Cd&
0
 
LVL 33

Expert Comment

by:paulmacd
Comment Utility
You could create a second, smaller version of the image, and load that one for mobile browsers.
0
 

Author Comment

by:nsitedesigns
Comment Utility
Cobol,

I modified small css file to .img_award {width:150px;}
I put this class on award image.  I cannot see the image.

Paulmaccd
If I create a second image, what width would you suggest?
How do I modify css to replace current image with new image when on mobile device?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
You have an obsolete width attribute specified directly on the image tag. that negates the CSS and makes it impossible for any kind of responsive behavior.

Cd&
0
 

Author Comment

by:nsitedesigns
Comment Utility
I just now created img.award.  Where is there an obsolete tag?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
Comment Utility
The img tag in the markup has width specified:

<p><img src="img/awards.jpg" alt="" width="400" class="img_award" /></p>

Cd&
0
 

Author Comment

by:nsitedesigns
Comment Utility
Ah, OK.  I removed that and now image displays pretty good on mobile portrait but still too big for landscape.  : (
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to count occurrences of each item in an array.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now