Главная » Блог » Вывод событий афиши в виджете в 2 колонки

Вывод событий афиши в виджете в 2 колонки
26 мая 2017

Как вывести события афиши в виджете в 2 колонки.

По умолчанию с шаблоном для виджета вывода событий афиши идут такие стили:

.wd_poster .image{height: 150px; overflow: hidden;clear: both;}
.wd_poster .title {clear: both;padding: 5px;}
.wd_poster .image img {max-width: 100%;}
.wd_poster .item {border-bottom: 1px solid #EAEAEA;padding-bottom: 10px;}
.wd_poster .moreinfo .category {float: left;}
.wd_poster .moreinfo .date {float: right;}

Если вы хотите выводить по 2 события в строку, замените их на

.wd_poster .image{height: 150px; overflow: hidden;}
.wd_poster .title {clear: both;padding: 5px;}
.wd_poster .image img {max-width: 100%;}
.wd_poster .item {border-bottom: 1px solid #EAEAEA;padding-bottom: 10px;width:50%;float:left;}
.wd_poster .item:nth-child(2n) {clear:both;}
.wd_poster .moreinfo .category {float: left;}
.wd_poster .moreinfo .date {float: right;margin-right: 10px;}

Изменения выделены жирным. Получите такой вывод афиши

Может не подойти тем, у кого событий в афише мало.

Рекомендую также добавить следующие стили, чтобы вернуть вывод в одну колонку на маленьких экранах

@media screen and (max-width: 480px) {
.wd_poster .item {width:100%;}
.wd_poster .item .teaser {display: none;}
}