Почему не работает второй медиа запрос?

Question

[svenmark86]

Не работает второй медиа запрос. !important не помогает. Запрос стоит в самом низу.

@media (max-width: 991px) {
   /* Nav */
   .nav {
      display: none;
   }

   /* Burger */
   .burger {
      display: block;
   }

   /* Intro */
   .intro__title {
      font-size: 40px;
   }
}

@media (max-width: 767px) {
   .intro {
      height: auto;
      padding-top: 130px;
      padding-bottom: 30px;
   }
}

Comments

[Ankhena]

Хорошо бы знать, что есть для intro до и после media.

Почему он не работает можно посмотреть через инструменты разработчика. На вкладке Computed выбрать нужное свойство и посмотреть какое значение выиграло и почему.

Answer 1

[svenmark86]

Всё.
Нашел косяк.
Инспектор почему-то не обрабатывает второй медиа запрос.
Если уменьшать отдельно окно браузера, то все работает.
Возможно косяк самого гугла и оперы так как в сафари на видео по которому делаю сайт все работает

Answer 2

[an]

@media screen and (max-width: 767px) {

}

Comments

[Sergei Nazarenko]

screen не обязательно и вообще как говорится в спецификации

Note: It is expected that all of the media types will also be deprecated in time, as appropriate media features are defined which capture their important differences.

[svenmark86]

media screen and (max-width: 767px) {

}

Тоже пробовал, не помогает.

Answer 3

[KERSOR]

Проверь в окне разработчика (F12), у элемента она регается или нет. И надо писать media... Можешь скинуть полный код на jsfiddle

Comments

[svenmark86]

Проверял, не регается. "И надо писать media..." вот эту часть не понял, о чем ты?
Поковырялся сегодня еще и заметил, что при (max-width: 981px) все работает, если брать ниже, например 980px, то опять не видит этот запрос

На jsfiddl все работает хотя немного странно, запрос активируется при 782px. Но если просматривать в хроме, или опере, так же не фурычит

https://jsfiddle.net/Svenmark86/2bv1oyaf/1/