Question

Добрый вечер.  Никак не могу починить баг шаблона 1321. Установила чистый шаблон, захотела сделать так чтобы в кратком описании материала картинка $IMAGE1$ стояла по центру, а в полном описании - слева. Не получается. Все картинки становятся слева.  Решила загрузить изображение через Файловый менеджер и поставить его по центру в полной новости - не ставится, упортно стоит слева.  Тогда мне сказали сделать вот что: удалить float: left; из строки стилей .eMessage img,.eText img {max-width:100%; height:auto!important;float:left;margin:5px 20px 5px 0!important;border:none!important;} а само изображение $IMAGE1$ вставлять в полной новости через <div style="float:left">$IMAGE1$</div> чтобы текст обтекал картинку.  Надо заметить, что после удаления float: left; картинка из Файлового менеджера стала по центру, и изображение из краткого описания $IMAGE1$ тоже стало по центру.  Но появилась другая проблема. $IMAGE1$ не хочет нормально обтекать текст. Под картинкой появляется белое поле, и чем экран моб. меньше, тем этот отступ больше. Вот скриншот.  Как это исравить, я не знаю? Битый час уже ломаю голову. Вот удивительно, но в старых шаблонах таких проблем не было, зато в новых адаптивных, вечно что-то не так.  P.S. Обидно, что Прем оплачен вперед на пару месяцев...

Answer 1

В таблице стилей, выделенное красным регулируйте

.eMessage img, .eText img {

    border: medium none !important;

    height: auto !important;

    margin: 5px 20px 5px 0 !important;

    max-width: 100%;

}

Comments

Пробовала уже, ничего это не дает... Видимо, нужно как-то иначе чинить.

Answer 2

Пропишите это в CSS   

.img-left {float:left;}

и в 160 строке удалите overflow: hidden;

.eMessage p, .eText p {  margin: 0px; overflow: hidden; padding: 0px 0px 5px; }

Comments

А саму картинку как вставлять? Через $IMAGE1-left$ или просто $IMAGE1$ или же через констукцию <div style="float:left">$IMAGE1$</div>?

---

Катя,

Просто $IMAGE1$, он у вас в диве, и этот див будет обтекаемым.

---

Попробовала все 3 способа вставки картинок.  Через $IMAGE1$ не получается. Визуальные редактор ставит его в <p> вместе с абзацем текста и обтекания нет.  Через $IMAGE1-left$ - обтекание есть на ПК, но нет на мобильном.  Через <div style="float:left">$IMAGE1$</div> обтекание как-то криво проходит на мобильных. Проблемы с отступами. Справа текст слишком близко, снизу под картинкой большой разрыв.

---

Катя,

Итак, делаем как я напишу, код $IMAGE1$ заворачиваем в див 

<div class="img-left">$IMAGE1$</div>

прописывам в ксс это

.img-left {float:left; margin:0px 10px 10px 0px !important;}

Далее,  в 160 строке удалите overflow: hidden;

.eMessage p, .eText p {  margin: 0px; overflow: hidden; padding: 0px 0px 5px; }

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