0

I am having an issue disabling the .affix class on smaller screens. I have tried the answer found here: How can I disable Bootstrap's "affix" on smaller screens? with no luck.

I am trying to affix two sidebars, one left and one right and then have them not affixed for smaller screens. Here is my CSS:

#accordian2.affix {
left: 10;
position: fixed;
width:15%;

}

#notes.affix {
right: 0;
position: fixed;
width:16%;
margin-right: 45px;

}

And I tried this to disable for smaller screens:

@media (min-width: 768px) {
  .affix {
      position: static;
  }
}

With no luck. The only other class I have applied to my HTML is .accordian for the one affixed on the left and no other class for the one on the right.

Let me know if you need to see the HTML.

Thanks!

Community
  • 1
  • 1
Allen Levings
  • 142
  • 11

1 Answers1

2

try this instead:

@media all and (max-width: 768px) {
  #accordian2.affix, #notes.affix {
      position: static;
  }
}

Looks like you were just missing some things (all and), also you used min instead of max. Min would mean the width would have to be at least 768px wide for the rules to apply.

Jon
  • 151
  • 3
  • Thanks for the try, but no dice. The two affixed divs still overlap the center content on resize. – Allen Levings Nov 11 '14 at 00:22
  • 1
    I see, may be because the first rules had more detailed paths and are trumping the media query rules, I have modified the answer. make sure the media query is placed below the other rules. – Jon Nov 11 '14 at 00:54