Solved

bootstrap - image breaks when site downsizes

Posted on 2014-02-20
9
353 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
yippee skippee it worked!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
input text box not behaving properly when debug points are set 4 26
FTP File permissions 1 27
Creating a slider 12 31
SVG Star 4 14
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now