Как правильно адаптировать картинку в wordpress?

Question

[YouAre]

Делаю сайт на Layers WP framework (тема для wordpress)
На главной странице слайдер с 1 картинкой, который не адаптируется под маленькие экраны.
Нужно сделать вот так: www.privatejet.com
Имею такой код:

.layers-widget-slide-3-436
{ background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('...'); }

На праздниках решил сделать сайт без помощи посторонних лиц - и пожалел об этом. Назад пути нет. Помогите!)

Comments

[Егор Лавренов]

Дай ссылку посмотреть на примере

Answer 1

[Орхан Гасанлы]

Мне кажется, что вам стоит изучить медиа запросы CSS. Используя медиа запросы вы можете добавлять разные стили под разные размеры экранов.
htmlbook.ru/css/value/media

@media all and (max-width:320px) {
ВАШ CSS КОД ЗДЕСЬ
}

И в режиме адаптивного просмотра браузера нужно проверить стили дизайна. Особенно: 1920, 1440, 1024, 768, 320 пикс

Comments

[YouAre]

Спасибо огромное, все получилось! Выставил 8 медиа-запросов. Это не много? Каким образом проверить стили дизайна? Проверял результат я просто уменьшением окна, потягивая его за край. Хотя и адаптацию ПК>Планшет>Телефон тоже включал. Все идентично.

Использовал следующие медиа-запросы:
@media all and (min-width: 1090px)

@media all and (min-width: 900px) and (max-width: 1090px)

@media all and (min-width: 900px) and (max-width: 1090px)

@media all and (min-width: 700px) and (max-width: 900px)

@media all and (min-width: 700px) and (max-width: 900px)

@media all and (min-width: 540px) and (max-width: 700px)

@media all and (min-width: 400px) and (max-width: 540px)

@media all and (min-width: 10px) and (max-width: 400px)

Насколько это верно?

[Орхан Гасанлы]

media all and (min-width: 700px) and (max-width: 900px)

media all and (min-width: 900px) and (max-width: 1090px)

а почему они дублируются?

если в моб. устройствах все корректно отображается, если в браузерах в режиме адаптивности (ctrl + shift + M) все корректно отображается, то все ок.