?
Solved

one image replaces another on mobile site

Posted on 2013-12-05
7
Medium Priority
?
239 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 39698813
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 34

Expert Comment

by:Paul MacDonald
ID: 39698814
You could create a second, smaller version of the image, and load that one for mobile browsers.
0
 

Author Comment

by:nsitedesigns
ID: 39698950
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
CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39699025
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
ID: 39699103
I just now created img.award.  Where is there an obsolete tag?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 2000 total points
ID: 39699259
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
ID: 39699310
Ah, OK.  I removed that and now image displays pretty good on mobile portrait but still too big for landscape.  : (
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

765 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