Почему не правильно отрабатывает @media?

Question

[vasIvas]

Вот код на codepen. Если сжать браузер до медиа запроса, который устанавливает зеленый фон и нажать кнопку, чтобы скрыть квадрат, то при увеличении до красного фона не возвращает квадрат. Почему? Если смотреть в отладчике, то видно что display: none и если его руками выставить в display: block, то квадрат снова становится видимым. Получается же что медиа запрос не срабатывает, но как же тогда красный цвет фона...

Answer 1

[Yaroslav Lyzlov]

Отрабатывает. Просто когда вы делаете hide через element.style, то у него приоритет выше, чем у стиля.

Comments

[vasIvas]

то есть чтобы вернуть квадрат нужно снова через element.style устанавливать block?

[Yaroslav Lyzlov]

Использовать display:block!important в media, чтобы приоритет был выше.

Answer 2

[holfza]

codepen.io/anon/pen/QjBQpX