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

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

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

Заказать код
Вступить в чат
Предложить код
Видео-урок

Инструкция

1

Создайте корзину и добавьте в него необходимые поля (Имя, телефон и тд.)

2

Выберите подходящий для вас вариант кода ниже из списка

3

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

Скопировать код
Код скопирован
Код для "Имя", "Фамилия", "Почта", "Номер телефона"

 <!-- Как сделать поля в корзине Тильда в 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;
    
   }
   
   /*Создаём колонку левую*/
   .t-input-group_em {
    float: left;
}
/*Создаём колонку правую*/
   .t-input-group_ph {
    float: right;
    
   }
   
   .t-radio__indicator {
border-width: 3px !important;
}
   
   .t-input-title {
    font-weight:500 !important;
   }
   
.t706 .t-input-group {
margin-left: 2%;
margin-bottom: 15px;
}

/*Выставляем ширину полей по 48%, убираем классы полей, которые не нужны*/
    .t-input-group_nm , .t-input-group_ph , .t-input-group_sb, .t-input-group_em {
     width: 48%;   
     
    }
    
/*Добавляем отступ сверху у кнопки*/   
    .t678 .t-submit {
     margin-top: 15px;
}    
/*Редактируем вид окна Error*/
.t-form__errorbox-wrapper {
    clear: both;
}
}
</style>
Скопировать код
Код скопирован
Код для "Имя" и "Почта"

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

<script>

    $('.t-input-group_nm:first').addClass("sbleft");
    $('.t-input-group_em:last').addClass("sbright");

</script>

<style>
/*Применяем отображение на экранах больше 550рх*/
@media screen and (min-width: 550px) {
  /*Создаём колонку левую*/
  .t-input-group_nm {
    float: left;
    width: 48%;
    margin-right: 4%;
  }
  /*Создаём колонку правую*/
  .t-input-group_em {
    float: right;
    width: 48%;
  }
  /*Выставляем ширину полей по 48%, убираем классы полей, которые не нужны*/
  .t-input-group_ph, .t-input-group_sb, .t-input-group_in {
    width: 100%;
  }
}
</style>
Скопировать код
Код скопирован
Код для "Имя" и "Телефон"

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

<script>

    $('.t-input-group_nm:first').addClass("sbleft");
    $('.t-input-group_ph:last').addClass("sbright");

</script>

<style>
/*Применяем отображение на экранах больше 550рх*/
@media screen and (min-width: 550px) {
  /*Создаём колонку левую*/
  .t-input-group_nm {
    float: left;
    width: 48%;
    margin-right: 4%;
  }
  /*Создаём колонку правую*/
  .t-input-group_ph {
    float: right;
    width: 48%;
  }
  /*Выставляем ширину полей по 100% для остальных полей*/
  .t-input-group_em, .t-input-group_sb, .t-input-group_in {
    width: 100%;
  }
}
</style>
Скопировать код
Код скопирован
Код для "Почта" и "Телефон"

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

<script>

    $('.t-input-group_em:first').addClass("sbleft");
    $('.t-input-group_ph:last').addClass("sbright");

</script>

<style>
/*Применяем отображение на экранах больше 550рх*/
@media screen and (min-width: 550px) {
  /*Создаём колонку левую*/
  .t-input-group_em {
    float: left;
    width: 48%;
    margin-right: 4%;
  }
  /*Создаём колонку правую*/
  .t-input-group_ph {
    float: right;
    width: 48%;
  }
  /*Выставляем ширину полей по 100% для остальных полей*/
  .t-input-group_nm, .t-input-group_sb, .t-input-group_in {
    width: 100%;
  }
}

</style>

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