?
Solved

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

Posted on 2014-01-12
5
Medium Priority
?
1,209 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
[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
  • 2
5 Comments
 
LVL 54

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

650 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