Как скрыть изображение на мобильном телефоне в теме WordPress

Question

Я использую бесплатную тему WordPress OceanWP , и у меня возникла проблема с заголовком на мобильных устройствах. Изображение, которое я использовал для заголовка, хорошо выглядит на настольных компьютерах, но затеняется текстом на мобильных и планшетных устройствах. Я решил, что лучший пример действий - полностью скрыть изображение на чем-либо, кроме рабочего стола.

Я попытался добавить этот фрагмент кода в таблицу стилей в строке 2621:

#site-header {
background-image: none;
}

Фрагмент помещен в оператор @media:

@media only screen and (max-width: 959px) {
[...]
}

Я также добавил его в уменьшенную версию, но изображение все еще отображается.

Может кто-нибудь увидеть, что я сделал неправильно? Или есть другой обходной путь, который может работать?

Answer 1

Ваш стиль темы имеет приоритет над вашим собственным css файлом. Попробуйте изменить порядок загрузки CSS или добавьте! Важный после background-image: нет. Вот так:

@media only screen and (max-width: 959px) {
    #site-header {
        background-image: none !important;
    }
}

Кстати, похоже, что вы не используете дочернюю тему. Возможно, вы захотите сделать это, если хотите сохранить все свои изменения позже, когда обновится основная тема. Посмотрите на это для более подробной информации.

Answer 2

В вашем style.min. css, go к этому медиа-запросу и добавьте !important к тегу background-image.

@media only screen and (max-width: 959px) {
 #site-header {
  background-image: none !important;
 }
}

Кроме того, при разработке веб-сайта старайтесь не чтобы минимизировать ваши css & js. Сделайте это, как только все будет сделано, чтобы было намного проще кодировать и настраивать вещи.