Greg Gum Greg Gum - 3 months ago 11
CSS Question

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

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

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

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