2

From my understanding, Twitter Bootstrap 3 considers any -md to be screen sizes whose min-width is 992px, according to this post: Twitter Bootstrap 3: how to use media queries?

Now what I want to do is, I want to apply CSS if and only if the screen size is medium, and nothing else. What I tried was

@media(max-width:767px){
}

@media(min-width:768px){
}

@media(min-width:992px){
    .margin-bottom-image-md { margin-bottom: 15%; }
}

@media(min-width:1200px){
}

but this effects large screens as well. So then what I did was:

@media(max-width:767px){
}

@media(min-width:768px){
}

@media(min-width:992px) and (max-width:1199px){
    .margin-bottom-image-md { margin-bottom: 15%; }
}

@media(min-width:1200px){
}

and it worked, but I'm just wondering if this is the only approach or if there is another more recommended approach to take (maybe Bootstrap has it's own way of dealing with this which I am not aware of)?

Community
  • 1
  • 1
SilentDev
  • 20,997
  • 28
  • 111
  • 214

1 Answers1

4

Unless you are using SASS or LESS(You can use variables or your way), the way you have defined is correct. The and operator will check for both condition.

m4n0
  • 29,823
  • 27
  • 76
  • 89