Solved

How do I get a responsive image to work with AFFIX in Bootstrap 3?

Posted on 2014-01-12
5
1,044 Views
Last Modified: 2014-02-14
I have a responsive image that I'm trying to AFFIX when the user scrolls.  The image does AFFIX, but it loses it's responsiveness when data-spy="affix" is called.  Any idea how to fix this problem?  Here is the link:
http://therevolutionet.com/ION/BS3/affixMap.html
0
Comment
Question by:TrevorTomato
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39774898
Add a custom css using a media query to match bootstrap. Here I added a class called mapimg
@media (min-width: 768px) { 
.img-responsive.mapimg{
  max-width:400px;
  
 }

}

Open in new window

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
     <img class="img-responsive mapimg" src="http://therevolutionet.com/ION/BS3/img/map_demo.jpg">
    </div>

Open in new window


I have a sample here http://jsbin.com/eZAKiDA/3/

You can see you should really change the max width for each of

970px and 1170px
@media (min-width: 970px) { 
.img-responsive.mapimg{
  /* play with width max-width:400px; */
  
 }

}
@media (min-width: 1170px) { 
.img-responsive.mapimg{
   /* play with width max-width:400px; */
  
 }

}

Open in new window

0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39774904
This seems to work http://jsbin.com/eZAKiDA/3/


@media (min-width: 768px) { 
.img-responsive.mapimg{
  max-width:400px;
  
 }

}
@media (min-width: 970px) { 
.img-responsive.mapimg{
  max-width:350px;
  
 }

}
@media (min-width: 1170px) { 
.img-responsive.mapimg{
  max-width:450px;
  
 }

}

Open in new window

0
 

Author Comment

by:TrevorTomato
ID: 39774908
max-width fixed it!  Thanks Padas!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

756 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