CODEWITHSUNDEEP
csstwitter-bootstrap
Allen Levings
Allen Levings

Reputation: 142

Bootstrap Affixed Sidebar Issue on Smaller Screen

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!

Upvotes: 0

Views: 891

Answers (1)

Jon
Jon

Reputation: 151

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.

Upvotes: 2

Related Questions