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

[Iga]

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

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

 

[vvmupp]

А если вместо 550px поставить 100% в css? Или в шаблоне изменить на значение 100% переменную, которая отвечает за ширину

 

[Iga]

Или в шаблоне изменить на значение 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%, то получится вот так
Для просмотра ссылки Войди или Зарегистрируйся

 

[Iga]

Методом проб и ошибок нашел корявенький, но вариант.

Тупо перебивкой стилей.

@media all and (max-width: 551px){
    .pinterest-container li {
        width: 110%!important;
        left: -16px!important;
    }
}

Почему раньше не наткнулся на данное решение ответить не могу!

 

[tizor]

просто используй `max-width: 100%;` в медиа тегах.