Не работает медиа запрос?

Question

[Error420]

Не работает медиа запрос . Сначала попрописал медиа запрос max-width:992px , ниже прописал max-width: 576px . Все всегда срабатывало и вроде как все написано без ошибок . Но почему-то в этот раз не хочет работать .

@media screen and (max-width:992px){
h1, h2 {
    font-size: 5vmin;
}

#container {
    width: 50vw;
    height: 50vw;
    border: 2vw solid rgba(98,180,231,.8);
 }
}


@media screen and (max-width: 576px){
h1,h2{
    font-size: 3.8vmin;
}

#container {
    width: 55vw;
    height: 55vw;
    border: 2vw solid rgba(98,180,231,.8);
 }

}

Comments

[Ярослав Иванов]

Попробуйте выдернуть шнур из розетки и вставить снова.

[Александр]

Ну вообще всё работает:

[Денис Бондаренко]

Думаю, в таких случаях нужно идти на перекур и освежить голову) Медиа запросы работают на разных разрешениях ровно так, как вы их указали. Не понятно что не работает? Попробуйте сбрасывать кэш браузера что-ли

Answer 1

[Sinnk]

Стили перекрывают друг друга, для первого облась работы от 0px до 992px и для второго от 0 до 576px, нужно для первого поставить

@media (max-width: 992px) and (min-width: 576px) {
   /* CSS */
}