• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • 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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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