• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

one image replaces another on mobile site

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
nsitedesigns
Asked:
nsitedesigns
  • 3
  • 3
2 Solutions
 
COBOLdinosaurCommented:
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
 
Paul MacDonaldDirector, Information SystemsCommented:
You could create a second, smaller version of the image, and load that one for mobile browsers.
0
 
nsitedesignsAuthor Commented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
COBOLdinosaurCommented:
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
 
nsitedesignsAuthor Commented:
I just now created img.award.  Where is there an obsolete tag?
0
 
COBOLdinosaurCommented:
The img tag in the markup has width specified:

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

Cd&
0
 
nsitedesignsAuthor Commented:
Ah, OK.  I removed that and now image displays pretty good on mobile portrait but still too big for landscape.  : (
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now