Как скрыть div на мобильных устройствах (см. код)?

Mahol
На сайте с 20.11.2016
Offline
66
401

Всем доброго вечера/ночи.

Что-то не пойму, как применить @media к этому коду (виджет вордпресса)?

<style type="text/css">

.brighten img {

margin:50px 5px 15px 200px;

-webkit-filter: brightness(100%);

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.brighten img:hover

{

-webkit-filter: brightness(150%);

}

</style>

<div class="brighten">

<a href="http://сайт.ру"><img class="aligncenter size-full wp-image-2520" src="http://сайт.ру/wp-content/uploads/2018/02/sitaty-1.png" alt="" width="598" height="100" /></a>

</div>

Пробовал так в style.css (не работает):

@media screen and (min-width: 1000px) {

#brighten {

visibility: hidden !important;

display: none !important;

}

}

S
На сайте с 30.09.2016
Offline
469
#1
Mahol:

Пробовал так в style.css (не работает):

@media screen and (min-width: 1000px) {
#brighten {
visibility: hidden !important;
display: none !important;
}
}

Так Вы пытаетесь не скрыть, а открыть. Для того, чтобы скрыть, надо писать не min-width, а max-width, в зтом контексте стилей.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Staid
На сайте с 30.07.2014
Offline
59
#2

Попробуйте так:


@media all and (max-width: 768px) {
#brighten{display: none;}
}

Брэикпоинты можно подсмотреть у буцтрапа https://getbootstrap.com/docs/4.1/layout/overview/

Mahol
На сайте с 20.11.2016
Offline
66
#3

Всё работает, просто стояла решетка (#) вместо точки, не заметил.

Z0
На сайте с 03.09.2009
Offline
735
#4

Только про решетку хотел написать 🤪

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий