Элементы съезжают при просмотре на смартфоне

[Radamant]

Добрый день, товарищи, добавил пару инструкций с картинками на сайт банальной вставкой текста и изображения в текстовом поле раздела "Статьи". При просмотре на Пк все ок, хотя скорее всего на  мониторах с другим разрешением тоже будут косяки. На смартфоне сразу видно съезжание картинки за пределы блока, подскажите пожалуйста тег для удержания в блоке.  

[Tom]

Попробуйте в файл  catalog\view\theme\shopstroid\template\information\information.twig , в самом конце добавить

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
        $("img").attr("style","");
});
</script>

 

[Radamant]

Благодарю, со второй картинкой помогло, а вот там, где у меня непосредственно инструкция - нет, может быть его нужно еще в какой-нибудь файл прописать?

Змінено 14 грудня 2020 користувачем Radamant

[Tom]

Похоже на то, что вы (ну или кто то иной) уже залез шаловливыми ручками в файлы бутстрапа и внёс правки там, где делать этого нельзя.

Попробуйте в самый конец файла  catalog/view/theme/shopstroid/stylesheet/stylesheet.css

Добавить и сохранить
 

#information-information img {
	width: 100%;
	display: block !Important;
	margin: 0 auto;
}

 

[Radamant]

Я в stylesheet конечно залезал, но кроме какого-нибудь цвета и шрифта ничего там не менял, а ваш скрипт в стилях не совсем корректно работает, картинки теперь не съезжают, но они растянуты по всей ширине блока, некрасиво получается.

[Tom]

45 минут назад, Radamant сказал:

а ваш скрипт в стилях не совсем корректно работает

Задача скрипта убрать указанные изначально фиксированные размеры картинок в style и присвоить им класс img-responsive , который подхватывается в стилях бутстрап и всего лишь ограничивает сами изображения шириной страницы.

Второй мой совет , работает только на малых экранах. Вы можете ограничить действие скрипта, так же шириной экранов, с которых будут просматривать ваши статьи.

 

if ($(window).width() < 768) {

 .........

}

 

[Radamant]

Понял, спасибо.