Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

bootstrap - image breaks when site downsizes

Posted on 2014-02-20
9
Medium Priority
?
366 Views
Last Modified: 2014-02-20
Why does an image display when view on desktop (right column trio pic) yet when you downsize viewport, the image breaks?

Test site
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html

Image displays here
http://screencast.com/t/r9pNELYq

Image breaks here
http://screencast.com/t/DxWgf9HYojzg
0
Comment
Question by:nsitedesigns
  • 4
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39874808
It's not breaking - you are hiding it at lower screens and showing a different image.
Original image
<img class="img-responsive" title="Complex profile extrusions" alt="Complex profile extrusions" src="http://www.wiplastic.com/img/p_tri.jpg">

Image on smaller screens
<img class="manworking visible-xs" src="manworking.jpg">

...which does not exist.
0
 

Author Comment

by:nsitedesigns
ID: 39874840
crap.  ok that needs to be fixed.  There will be a trio of images on the right for every page on this site.  Do I need to save a big and small version of all those images?

I checked the css and it shows the following:
 img.manworking{float:right;margin-left:10px;margin-bottom:5px;}

It doesn't say the image is to change.  How do I modify that?  All I want is for the trio pic to resize.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39874891
And how/where should the image appear. Keeping it at the same position means its occupying a lot of real estate on smaller devices, even when it is scaled down
It is already responsive.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39874977
Actually, this is ok for bootstrap. It has classes to hide and show based on the viewport.  

It looks like you have this working now.

What you may consider is breaking out the "large" image into 3 separate images.  Then when the screen gets smaller, show only one image. This way, instead of shrinking the images which only makes it harder to see on a the small screen, you can view just one image at a decent size.
0
 

Author Comment

by:nsitedesigns
ID: 39875175
Nope, it isn't working now.  Image still breaks on xs size.  Since I already need to make the 3 new sizes of all the header images plus 3 new sizes for the animation on 9 pages, i am really not too keen on making 3 new sizes for 9 more images.  Would rather have pic go away on xs size.  How do I do that?

p.s  Hi Scott!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39875200
It already does go away, just remove the other image that shows up in its place if you don't want any image at all on small screens
0
 

Author Comment

by:nsitedesigns
ID: 39875224
I want p_tri.jpg to display on larger screens but go away on smaller screens.  What other image are you talking about?
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39875233
This one
<img class="manworking visible-xs" src="manworking.jpg">

It currently goes away as is on smaller screens, so you all need do is remove that image (and the container div)
0
 

Author Comment

by:nsitedesigns
ID: 39875247
yippee skippee it worked!
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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

916 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