Слайдер карточек на мобильных устройствах в uKit
Карточки в один ряд на мобильных устройствах это отличный инструмент для быстрого показа информации. Не зависимо от того, в какой отрасли Вы находитесь - туристическая фирма, юридический сервис или доставка пиццы.
С помощью нашего скрипта Вы сможете сделать в стандартном блоке uKit, карточки в один ряд на мобильных устройствах.
Настройки блока
Укажите класс «mob-grid» (без кавычек) блоку в котором карточки должны быть в один ряд (Скриншот)
Установка
Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
<style>
@media (max-width: 992px) {
#main .mob-grid .row {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-orient: horizontal!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: row!important;
flex-direction: row!important;
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!important;
margin-right: 14px!important;
}
#main .mob-grid .container {
overflow: scroll!important;
}
#main .mob-grid .container {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-orient: horizontal!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: row!important;
flex-direction: row!important;
}
#main .mob-grid .container .col {
min-width: 280px!important;
}
#main .mob-grid {
padding-top: 50px!important;
}
#main .mob-grid::before {
background-image: url(https://ukit.com/uploads/s/t/k/2/tk2lwidyyffp/file/full_ZSqvaAYk.svg);
content: "";
position: absolute;
top: 14px;
right: 10px;
background-size: 30px;
height: 36px;
width: 42px;
background-repeat: no-repeat;
z-index: 1;
}
}
</style>
Сохраните код и опубликуйте ваш сайт.
0
