bootstrap - image breaks when site downsizes

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
nsitedesignsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
GaryConnect With a Mentor Commented:
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
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
GaryCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
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
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
I want p_tri.jpg to display on larger screens but go away on smaller screens.  What other image are you talking about?
0
 
nsitedesignsAuthor Commented:
yippee skippee it worked!
0
All Courses

From novice to tech pro — start learning today.