Solved

bootstrap - image breaks when site downsizes

Posted on 2014-02-20
9
362 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

626 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