Как сузить картинки в мобильной версии?

Iga

Гуру форума
Регистрация
12 Янв 2014
Сообщения
425
Реакции
83
Вот Для просмотра ссылки Войди или Зарегистрируйся на одну из проблемных страниц. Сайт на WP. Галерея реализована с помощью аддона к visual composer - Masonry Gallery. В настройках установлена ширина 550px.
Для просмотра ссылки Войди или Зарегистрируйся
Больше никаких настоек нет.

При схлопывании в мобильную версию картинка оказывается шире, чем видимая область и появляется прокрутка.
Картинка обёрнута в li, которому как раз и задана эта самая ширина 550px. Бутстраповский img-responsive не активируется.
Полдня бьюсь, не могу победить!
 
А если вместо 550px поставить 100% в css? Или в шаблоне изменить на значение 100% переменную, которая отвечает за ширину
 
Или в шаблоне изменить на значение 100% переменную, которая отвечает за ширину
Тогда в десктопе мясо
Для просмотра ссылки Войди или Зарегистрируйся

А если вместо 550px поставить 100% в css?
Если у .pinterest-container li img устанавливаю width: 73%!important; , то там, как я понял от li, вылезает вот такая шляпа
Для просмотра ссылки Войди или Зарегистрируйся

У li генерируется вот такой стиль
Код:
element.style {
    list-style: none;
    width: 550px;
    display: list-item;
    position: absolute;
    top: 371px;
    left: -65px;
}
Если поставить left: 0px; width:100%, то получится вот так
Для просмотра ссылки Войди или Зарегистрируйся
 
Методом проб и ошибок нашел корявенький, но вариант.

Тупо перебивкой стилей.
Код:
@media all and (max-width: 551px){
    .pinterest-container li {
        width: 110%!important;
        left: -16px!important;
    }
}
Почему раньше не наткнулся на данное решение ответить не могу!
 
просто используй `max-width: 100%;` в медиа тегах.
 
Назад
Сверху