How to combine min-width and max-width in one media query

Question

This media query is not working as I expected it to.

What I want to do is hide an element if the window is below 544px, and also hide it if it is above 767px. So it will only be visible while the window is between 544px and 767px.

@media (max-width: 544px) and (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }

It seems that they work separately, but not together.

How do I achieve this?

Answer 1

You can combine two media queries in one, like this:

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
    display: none !important;
}
}

EDIT This will hide .show-sm-only on screen smaller than (max-width) 544px and on screen bigger than (min-width) 767px.

Answer 2

If you want a media query that is applied when BOTH conditions are true (which I think is what you're looking for here), use another and. Here it's hidden by default, and only visible when between 544px to 767px.

.my-element {
  display: none;

  @media (min-width: 544px) and (max-width: 767px) {
    display: block;
  }
}