At points 599px, 899px, 1199px and 1799px, media queries disappear. These points under the conditions of max-width are not inclusive, but how to deal with it? There was an option without add. conditions with max-width (only min-widths), but only the query @media only screen and (min-width: 600px) started working on all widths. Where is the mistake? Tell me, please, otherwise I’m already at a loss.

.menu { width: 100%; line-height: 2.7; box-sizing: border-box; } .menu__item { display: inline-block; list-style: none; padding: 0 3%; } .menu__item a { font-size: 18px; font-weight: bold; letter-spacing: 8px; text-transform: uppercase; text-decoration: none; color: #f84545; } @media only screen and (min-width: 1800px) { .menu__item a { font-size: 24px; letter-spacing: 13px; color: brown; } } /*for-desktop-up*/ @media only screen and (min-width: 1200px)and (max-width: 1799px) { .menu__item a { font-size: 18px; letter-spacing: 10px; color: pink; } } /*for-tablet-up*/ @media only screen and (min-width: 900px)and (max-width: 1199px) { .menu__item a { font-size: 16px; letter-spacing: 8px; color: blue; } } /*for-tablet-portrait-up*/ @media only screen and (min-width: 600px)and (max-width: 899px) { .menu__item a { font-size: 12px; letter-spacing: 5px; color: orange; } } /*for-phone-only*/ @media only screen and (max-width: 599px) { ul .menu__item a { font-size: 5px; letter-spacing: 3px; color: green; } } 
 <nav class="menu"> <ul> <li class="menu__item"><a href="#" class="menu__link">Mens</a></li> <li class="menu__item"><a href="#" class="menu__link">Womens</a></li> <li class="menu__item"><a href="#" class="menu__link">Brands</a></li> <li class="menu__item"><a href="#" class="menu__link">Sale</a></li> <li class="menu__item"><a href="#" class="menu__link">News</a></li> </ul> </nav>

    2 answers 2

    max-width write equal to the next min-width.

    For example:

    @media only screen and (min-width: 900px) and (max-width: 1199px) {

    change to:

    @media only screen and (min-width: 900px) and (max-width: 1200px) {

    • Protestila in the inspector. Interestingly it turns out: for the size 1200 pixels, the query will be media only screen and (min-width: 900px) and (max-width: 1200px), not media only screen and (min-width: 1200px) and (max-width: 1800px) (as it was before). - Halyna

    @ dean-gray conflict will be then)) there min-width and max-width are the same and it will turn out like that. But you are right. @halyna try as Dean Gray says only with the fact that max-width round, and min-width +1

    example: @media only screen and (min-width: 901px) and (max-width: 1200px) {

    • It seems the css are not conflicted people wrote :) The @ Dean / Gray option worked. - Halyna