youx.agency
Обсудить проект
info@youx.agency
YOUX agency


ВЫХОДИТЕ ИЗ ТЕНИ. ВРЕМЯ ПРИШЛО.
ОБСУДИТЬ ПРОЕКТ
En
Ru
Наш чат для помощи и общения

Как сделать поля в корзине Тильда в 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>
Больше модификаций

Возможно вы поверили в себя и сегодня нужно больше знаний. Посмотрите что есть еще интересного