Как убрать полностью блок на телефоне?

Question

[Mist_01]

Есть блок который скрывается на телефоне при максимальной ширине экрана 425px,
вот код:

@media screen and (max-width: 425px){
 .block{
 display: none; }
}

блок скрывается, но когда телефон перевернуть в горизонтальный режим, то соответственно ширина телефона становится больше и блок снова появляется т.к. уже больше 425px, как правильно сделать, что бы его не было в любом положении?

Comments

[Ankhena]

Решается двумя media условиями, зачем тянуть дополнительные скрипты ради этого?

Answer 1

[Матвей Феникс]

А js можно использовать? Есть такая штука - https://github.com/hgoebl/mobile-detect.js
Подключаешь:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.1/mobile-detect.min.js"></script>

Пишешь скрипт, который будет навешивать css или убирать, если обнаружен мобильник.
Выстави в инструментах разработчика мобильную версию > какой-нибудь телефон, например iphone 6 и перезагрузи страницу. Блок пропадет, независимо от ориентации экрана.
Вот код: https://codepen.io/matvey-phoen1x/pen/eKQPag

Comments

[Mist_01]

Сработало, спасибо.