Адаптация медиа элемента шапки под телефон

  • aliquidddd

    (@aliquidddd)


    4 года, 4 месяца назад

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

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

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

    • Тема изменена 4 года, 4 месяца назад пользователем aliquidddd.

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

Просмотр 1 ответа (всего 1)
  • Автор aliquidddd

    (@aliquidddd)

    4 года, 4 месяца назад

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

    @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 так же не решал проблему.
    Есть у кого какие-нибудь рекомендации?

    • Ответ изменён 4 года, 4 месяца назад пользователем aliquidddd.
Просмотр 1 ответа (всего 1)
  • Тема «Адаптация медиа элемента шапки под телефон» закрыта для новых ответов.