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

Как сделать поля в корзине Тильда в 2 колонки

Смотреть урок

Данный код помогает отобразить поля в корзине Тильда в 2 колонки. Например вы можете поставить имя и номер рядом

Инструкция

1

Вставьте код ниже в блок "T123" на странице с корзиной

2

Ниже приведены варианты исполнения для полей "Имя", "Номер телефона", "Дата" и "Время"

Скопировать код №1
Код скопирован
Код для "Имя" и "Телефон"

 <!-- Как сделать поля в корзине Тильда в 2 колонки -->
 <!-- https://youx.agency/kak-sdelat-polya-v-korzine-tilda-v-2-kolonki -->

<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>
Скопировать код №2
Код скопирован
Код для "Дата" и "Время"

 <!-- Как сделать поля в корзине Тильда в 2 колонки -->
 <!-- https://youx.agency/kak-sdelat-polya-v-korzine-tilda-v-2-kolonki -->

<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>

Другие модификации

Наш чат Telegram

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

Ютуб канал
Вступить в чат
* Регулярная техническая поддержка, помощь и консультации