Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

bootstrap - image breaks when site downsizes

Posted on 2014-02-20
9
Medium Priority
?
364 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
[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
  • 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
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 
LVL 53

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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. …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

722 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