Настройка информеров для планшетов и телефонов. Как сделать?..

Как сделать сдвиг картинок, при уменьшении размера экрана устройства для планшетов и телефонов. Если уменьшать размер экрана, то правую картинку не видно. хотелось бы чтобы правая картинка сдвигалась вниз. Если размер экрана ещё уменьшить и вторая

Настройка информеров для планшетов. Как сделать?..

» » Сообщение:

Здравствуйте.
Недавно задавал вопрос по сдвигу картинки с помощью информеров likbezz.ucoz.ru/forum/61-373-13#40781. Спасибо всё получилось.
Возник ещё один. А как сделать сдвиг картинок, при уменьшении размера экрана устройства (для планшетов и телефонов).
У меня в информере три колонки. Соответственно выводится три картинки. Если уменьшать размер экрана, то правую картинку не видно. хотелось бы чтобы правая картинка сдвигалась вниз. Если размер экрана ещё уменьшить и вторая картинка выходила бы за границу экрана, то и она должна сдвигаться вниз. При минимальном размере экрана (для телефонов) в информере, вместо трех колонок была бы одна.
Сайт lameli.ucoz.ru/stuff

Настройка информеров для планшетов и телефонов. Как сделать?..

http://i76.fastpic.ru/big/2016/0304/d9/ ... b4c6d9.jpg

inline, block, float, display, стилей, формировать, вид, переопределять, табличных, предпочтительнее, первое, определенного, поведение, тегов, блочное, вывод, изменить, информере, уменьшать, телефонов

Re: Как сделать.. Не сортированные вопросы/ответы по юкоз

Admin » » Сообщение:

larson6969

larson6969 писал(а) › 04 мар 2016, 22:00:А как сделать сдвиг картинок, при уменьшении размера экрана устройства (для планшетов и телефонов).
У меня в информере три колонки. Соответственно выводится три картинки. Если уменьшать размер экрана, то правую картинку не видно.

Дело в том, что при настройке информера «в 3 колонки» материалы выводятся в таблице, как и отмечал выше.
Следовательно, нужно: либо изменить настройки на вывод в одну колонку и формировать вид при помощи стилей - display:inline-block; или float:left;; либо переопределять стили табличных тегов на блочное поведение при разрешении ниже определенного.
Предпочтительнее первое.
Типа:

Код: Выделить всё Развернуть
<style type="text/css">
.informer,
.informer li{
   margin:0;
   padding:0;
   list-style:none;
}
.informer{
   width:100%;
   overflow:hidden;
}
.informer li{
   width:33%;
   float:left;
   min-width:200px;
}
</style>
<ul class="informer">
<li>Картинка 1</li>
<li>Картинка 2</li>
<li>Картинка 3</li>
</ul>

То бишь, в настройках информера указать: в одну колонку, 3 материала (или кратное трем, т.к 100% / 3 ≈ 33%).
В шаблон информера:

Код: Выделить всё Развернуть
<li><a href="$ENTRY_URL$"> .... </li>

В шаблон страницы:

Код: Выделить всё Развернуть
<ul class="informer">$MYINF_5$</ul>
inline, block, float, display, стилей, формировать, вид, переопределять, табличных, предпочтительнее, первое, определенного, поведение, тегов, блочное, вывод, изменить, информере, уменьшать, телефонов







Похожие темыКомментарии ПросмотрыПоследнее сообщение
01235Как сделать загрузочную флешку с Wi...
Сообщение от: Admin
044Как сделать свою шапку для нужных р...
Сообщение от: Admin
2884Re: Дополнительные шрифты к BB-кода...
Сообщение от: SKh
121582Re: Как сделать.. Вопросы от новичк...
Сообщение от: Yael
305072Re: Как сделать рейтинг материалов ...
Сообщение от: Admin