Медиа запрос max-width не работает ниже значения 979px

Question

Только начал в медиа запросы:

@media screen and (max-width: 978px) {
  #adaptive {
    background-color: red;
  }
}

Если ставлю меньше чем 979px (!), страница перестает реагировать на правило. Т.е. я хочу поставить например max-width: 500px, но это не работает, работает от 979+.

Создавал новую страницу - с чистого листа, на один блок - то же самое. хелп

Answer 1

Если ставлю меньше чем 979px (!), страница перестает реагировать на правило. Т.е. я хочу поставить например max-width: 500px, но это не работает, работает от 979+.

Страница не может не реагировать на правило. Смотрите пример ниже. Вероятнее всего, где-то у вас ошибка.

#adaptive {
  width: 100%;
  height: 100vh;
  background-color: chocolate;
}

@media screen and (max-width: 978px) {
  #adaptive {
    background-color: pink;
  }
}

@media screen and (max-width: 500px) {
  #adaptive {
    background-color: red;
  }
}

<div id="adaptive"></div>

Answer 2

так же проверь meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

БЛОГ НА HUSL

Медиа запрос max-width не работает ниже значения 979px

Ответы (2 шт):