Поддержка Темы и шаблоны Адаптация медиа элемента шапки под телефон

  • Доброго дня!
    В шапке сайта располагается медиафайл, который некорректно отображается на планшетах и телефоне. Хотелось бы это исправить путем добавления нового медиафайла, который будет адаптирован для планшетов и телефонов. В документации темы (OceanWP) нашел только такой стиль

    /* Transparent Header Color on Mobile Devices 
    @media only screen and (max-width: 1280px) {
    	div#site-header-inner {
    		background-color: #ff0a0a;
    	}
    }

    . И то, даже при его использовании по краям экрана остается область с медиафайлом (предполагаю, что это из-за его растягивания).
    Может кто-то подсказать решение моей проблемы (замена медиафайла при уменьшении размеров экрана)?
    Спасибо!

    • Тема изменена 3 недели назад пользователем aliquidddd.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 1 ответа (всего 1)
  • Ребята из соседней темы, помогая одному человеку, вскользь помогли и мне. Но все равно остались некие трудности.
    Вставляя код

    @media only screen and (max-width: 1280px) {
    	div#site-header-inner {
    		 background-image: url(ссылка);
                     background-position: center bottom;
                     background-repeat: repeat;
                     background-size: cover;
             }
     }

    изображение меняется, но по краям остается прежний медиафайл.
    Тогда я решил задать стили для #site-header (т.к. именно в его стилях расположена ссылка на медиафайл), но первоначальные стили перекрывают мои (скрин). Z-index так же не решал проблему.
    Есть у кого какие-нибудь рекомендации?

    • Ответ изменён 3 недели назад пользователем aliquidddd.
Просмотр 1 ответа (всего 1)