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
Solved

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

Posted on 2014-01-12
5
1,014 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
CSS Logo Problem. 2 26
100% tall div not scrollable on iPhone 3 20
Insert Button on a table 16 38
I need help changing the colour of this image rollover please? 3 13
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

828 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