Bootstrap 3 Responsive Image Not Displaying Correctly

I don't understand why this responsive image displays correctly in jsFiddle when window is reduced, but has a a discontinuous jump in size when displayed in the webpage.

properties-test.htmserena.css

http://jsfiddle.net/dlearman/0w310dgs/10/

Help would be greatly appreciated
dlearman1Asked:
Who is Participating?
 
dlearman1Author Commented:
Maybe I can explain my problem better.

When the viewport is narrowed the image(map) reduces smoothly from 464x617 to 236x313 at a width of about 769px. But when it is reduced slightly less to about 758px, the image jumps back to its original 464x617 size.

This doesn't happen when viewing in Sublime Text 2, but it does happen in Safari and Firefox. I also get a horizontal scrollbar displayed.  

This website is not nearly completed and I'm using it for a teaching experience in mobile first design, but you are more than welcome look it over.  Any suggestions would be welcome... http://pricelearman.com/clients/serenaconstruction/.

Thank you for your time and effort in helping me out.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't see bootstrap but I do see some styles you have from bs.   Anyway, my guess is your css file is probably not loading.  Make sure you have the file location correct.  When I put your code in jsbin which allows full code it works fine http://jsbin.com/siqozubutu/1/edit?html,css,output    Note that the css is in the css tab.

Try changing your css from

<link href="./_css/main.css" rel="stylesheet" type="text/css" />

to

<link href="/_css/main.css" rel="stylesheet" type="text/css" />
0
 
RobOwner (Aidellio)Commented:
Here's your updated fiddle with the bootstrap classes: http://jsfiddle.net/0w310dgs/11/
0
 
dlearman1Author Commented:
This question just didn't garner much interest, so I am closing it.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> This doesn't happen when viewing in Sublime Text 2

This is a confusing statement because there is no preview with Sublime Text.  Js playgrounds like jsfiddle or jsbin may not behave exactly as if you looked at your page in your browser for many different reasons.  

You can use your browser's console or other tools to dig into what is going on with your page.  Your page is a bit heavy at 3.5mb http://tools.pingdom.com/fpt/#!/cD8aCq/http://pricelearman.com/clients/serenaconstruction/ and that is because of your images are coming through as about a half meg each.    This one is 600kb http://pricelearman.com/clients/serenaconstruction/_img/home/slides/image03.jpg and can easily be taken down to 125kb.  If you have 5 images that size you are at about 3mb.  Bringing those down to a proper size you will be at the same total size as just one of the current images.

So the real reason the Examples Rob and I showed you behave much better may be in part by some small tweaks we made, but we are not dealing with 3mb's of data.

Another reason for "jumping" may be your break points.  Take a look at the media queries http://getbootstrap.com/css/ 
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Open in new window


Let's say you have an image that is 1000px wide.  You have code
<div class="row">
    <div class="col-sm-9">
           <img src="someimage.jpg" class="img-responsive">
    </div>
   <div class="col-sm-3">
        some text
   </div>
</div>

Open in new window

What will happen is when you are on your desktop viewing this as full screen, your image will fill up the width of it's div.  Let's say your container is 100% and the browser viewport is 1000px.  That image will resize automatically smaller to 750px.  As you narrow your browser manually, the image will continue to get smaller proportionally because I have coded it as  img-responsive.   The reason it should be at about 750px is because col-xx-9 is 75% of col-xx-12.

As you keep narrowing your viewport and lets say you are at 800px wide, that image will now be  600px wide.  However, once your viewport narrows below 768px, the column that was on the left side will now go above the column that was on the right side and they will both take up 100% width.  This means your image will jump from about 576px wide to 768px wide.

If you had <div class="col-xs-12 col-sm-6 col-md" you would have even more jumping around.

However, you have to keep in mind that the only people that will see this jumping will be the developer.  If I load this on my phone, I am not going to do anything but perhaps turn my phone portrait to landscape and back.  So there may be a jump as the entire thing reconfigures and I would expect that.  Same on my tablet.  When I am on my desktop, I typically have my browser at between 60% to 80% of my screen depending on what I am doing and how many browser screens I have open.   But I am not constantly changing the width of the my screen unless I am curious as a developer. But as an actual user, I am leaving my browser as it is.

Let's say you always keep 2 columns like below.  Now your image will continue to resize "smoothly" but for anybody reading on a phone will probably end up zooming in because the objects could be too small.
<div class="row">
    <div class="col-xs-9">
           <img src="someimage.jpg" class="img-responsive">
    </div>
   <div class="col-xs-3">
        some text
   </div>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.