Search code examples
htmlcssmedia-queries

Problems setting a minimum width and a maximum media query to fall within a certain range

I'm attempting to display the content of <div class="myio"> within the range of 993px and 1202px. I've tried everything, however nothing happens when I insert this media query in my CSS rules. I have not added any styling to <div class="myio">.

@media (min-width: 1202px) and (max-width: 993px) {
  .myio {
    display: none;
  }
}
<div class="w3-bar w3-light-grey">
  <a id="black" href="#" class="w3-bar-item w3-button">Log In</a>
  <a id="green" href="#" class="w3-bar-item w3-button">Become A Goat</a>
  <div class="myio">
    <a href="#" class="w3-bar-item w3-button">FREE ADVICE</a>
    <a href="#" class="w3-bar-item w3-button">BID HELP</a>
    <a href="#" class="w3-bar-item w3-button">ODDS</a>
    <a href="#" class="w3-bar-item w3-button">RUMORS</a>
    <a href="#" class="w3-bar-item w3-button">APPENDAGES</a>
    <a href="#" class="w3-bar-item w3-button">EVALUATIONS</a>
    <a href="#" class="w3-bar-item w3-button">GOATS</a>
    <a href="#" class="w3-bar-item w3-button">CONTACTS</a>
    <a href="#" class="w3-bar-item w3-button">FAQ's</a>
  </div>
</div>

Solution

  • it doesn't work because you mixed up the max and min widths as below example display: none apply from 993 to 1202px

    @media (min-width: 993px) and (max-width: 1202px) {
.myio { display: none; }
}

    in the version that you have the display: none will be lower than 993 width