Question

Добрый день!  Подскажите, какой код можно добавить в мобильный шаблон, чтобы картинки не выходили за область экрана?  Вот страница для примера: http://windows-aktiv.my1.ru/stuff/nuzhnye_programmy/luchshij_besplatnyj_vpn_dlja_kompjutera/3-1-0-86  сдесь картинка и видео выходят за области экрана, если смартфон держать вертикально.  Можно их кодом выровнять по ширине текста?  За ранее благодарен. С уважением, Владимир.

Answer 1

Для адаптивности фото и видео (которое добавлено с ютуба) можно прописать в стили:

img,iframe {max-width:100%!important;height:auto!important;}

Comments

Прописал, но ничего не изменилось. Картинки загружал через файловый менеджер, видео с ютуба. Что еще можно сделать?

---

Владимир Куборев,

Покажите скриншот проблемы.

---

Yuri_Geruk,

И так во всех статьях, картинка выходит за область шаблона.

---

Владимир Куборев,

В таблице стилей PDA найти строку номер 747:

.material-message img {
 width: 100%;
 border-radius: 8px;
}

замените ее на:

.material-message img,.material-message iframe,.comm-form input, .comm-form textarea {max-width:100%!important;height:auto!important;}

после перед тем как проверять результат на мобильном, кеш в браузере очистите.

---

Yuri_Geruk,

Круто, спасибо. Теперь так же нужно сделать для страниц модуей.

Вот скрин:

---

Владимир Куборев,

Для страниц модулей. В шаблоне вида материалов модуля найдите такой код:

<table border="5" cellpadding="1" cellspacing="1" style="width: 550px;">

пропишите вместо красного 100%

---

Yuri_Geruk,

Не нахожу такого. Вот вид материалов каталога файлов:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?></td></tr></table><hr />

---

Владимир Куборев,

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

---

Yuri_Geruk,

С каталогом файлов понял, благодарю. В каталоге статей та же проблема, как там исправить?

---

Владимир Куборев,

В стилях строку 747 поправьте и сделайте ее такой:

.material-message img,.material-message iframe,.comm-form input, .comm-form textarea {max-width:100%!important;height:auto!important;}

тогда и для каталога статей будет хорошо.

---

Yuri_Geruk,

Получилось, только теперь в каталоге файлов картинки урезает. Как поправить?

---

Владимир Куборев,

Поправил код выше. Верните как было и далее в шаблон вида материалов модуля каталог статей, в самый низ пропишите код:

<style>.eMessage img {max-width:100%!important;height:auto!important;}</style>

---

Yuri_Geruk,

Сделал. Но картинки в каталоге файлов все равно урезанные остаются.

---

Владимир Куборев,

Вы кеш в браузере не очистили, потому и урезанные.

---

Yuri_Geruk,

Да заработало. Но теперь на Страница материала и комментариев к нему картинки опять стали вылазить за область экрана.

---

Владимир Куборев,

В каком модуле? Вы кеш в браузере почистили? Я проверил, все хорошо и не вылазит.

---

Yuri_Geruk,

Да все работает, благодарю.