КОНСУЛЬТАЦИЯ
ВЫХОДИТЕ ИЗ ТЕНИ. ВРЕМЯ ПРИШЛО.
Как сделать поля в корзине Тильда в 2 колонки
Данный код помогает отобразить поля в корзине Тильда в 2 колонки. Например вы можете поставить имя и номер рядом
Как выглядит :
Ниже приведены варианты исполнения для полей "Имя", "Номер телефона", "Дата" и "Время"
Вставьте код ниже в блок "T123" на странице с корзиной
1
2
Что делаем :
Код для "Имя" и "Телефон"
<script>
//Добавляем классы к выпадающим спискам
$('.t-input-group_sb:first').addClass("sbleft");
$('.t-input-group_sb:last').addClass("sbright");
</script>
<style>
/*Применяем такое отображение на экранах больше 550рх*/
@media screen and (min-width: 550px) {
/*Создаём колонку левую*/
.t-input-group_nm , .sbleft {
float: left;
}
/*Создаём колонку правую*/
.t-input-group_ph , .sbright {
float: right;
}
/*Выставляем ширину полей по 48%*/
.t-input-group_nm , .t-input-group_ph , .t-input-group_sb {
width: 48%;
}
/*Добавляем отступ сверху у кнопки*/
.t678 .t-submit {
margin-top: 15px;
}
/*Редактируем вид окна Error*/
.t-form__errorbox-wrapper {
clear: both;
}
}
</style>Код для "Дата" и "Время"
<script>
//Добавляем классы к выпадающим спискам
$('.t-input-group_sb:first').addClass("sbleft");
$('.t-input-group_sb:last').addClass("sbright");
</script>
<style>
/*Применяем такое отображение на экранах больше 550рх*/
@media screen and (min-width: 550px) {
/*Создаём колонку левую*/
.t-input-group_da , .sbleft {
float: left;
}
/*Создаём колонку правую*/
.t-input-group_md , .sbright {
float: right;
}
/*Выставляем ширину полей по 48%*/
.t-input-group_da , .t-input-group_md , .t-input-group_sb {
width: 48%;
}
/*Добавляем отступ сверху у кнопки*/
.t678 .t-submit {
margin-top: 15px;
}
/*Редактируем вид окна Error*/
.t-form__errorbox-wrapper {
clear: both;
}
}
</style>Больше модификаций
Возможно вы поверили в себя и сегодня нужно больше знаний. Посмотрите что есть еще интересного
ВЫХОДИТЕ ИЗ ТЕНИ.
ВРЕМЯ ПРИШЛО.
ВРЕМЯ ПРИШЛО.
Санкт-Петербург, Садовая 28-30, к1
email
Телефон
Расположение
Обсудить проект