Узнать стоимость проекта

Код помогает выровнять ширину блока текста с карточками (вопрос-ответ) относительно верстки автоскейл

Делаем аккордеон Тильда в 2-4 колонки автоскейл

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

Инструкция

1
Добавьте блок "TX16N" на страницу.
Ширина блока 12 колонок
2
Вставьте код в блок "Другое" - Т123 в подвал вашего сайта
3
Если нужно 3-4 в ряд, используем код #2 и дублируем блоки, не все в один
Код скопирован
Код для вставки (2 в ряд)
Код написан на коленке, используйте осторожно. Ширина 12 колонок, не менять !!
<!-- Делаем аккордеон Тильда в 2 колонки автоскейл | youx.agency -->
<!-- https://youx.agency/delaem-akkordeon-tilda-avtoskejl -->

<style>

/* Медиазапрос для экранов с шириной 1024px и выше (для компьютеров) */
@media (min-width: 1024px) {

    /* Контейнер, внутри которого будут элементы */
    .t-container {
        max-width: 100% !important;    /* Устанавливаем максимальную ширину на 100% */
        display: flex;                 /* Используем flexbox для размещения элементов в ряд */
        flex-wrap: wrap;               /* Разрешаем перенос элементов на новую строку, если нужно */
        justify-content: flex-start;   /* Выравнивание элементов по левому краю */
        padding: 0 1.5%;               /* Отступы по бокам по 1.5% */
    }

    /* Убираем левый отступ у элементов */
    .t-col {
        margin-left: 0px;
    }

    /* Каждый элемент будет занимать 47% ширины контейнера для 2 в ряду */
    .t-col_12 {
        flex: 0 1 47%;                 /* Устанавливаем, чтобы элементы занимали 47% ширины */
        box-sizing: border-box;        /* Чтобы padding и border не выходили за пределы ширины */
        margin-right: 3%;              /* Отступ справа между элементами */
    }

    /* Убираем правый отступ у последнего элемента */
    .t-container .t-col_12:last-child {
        margin-right: 0;             /* Убираем правый отступ у последнего элемента */
    }

}



</style>
Код скопирован
Код для вставки (3-4 в ряд)
* Если нужно сделать 3 в ряд, но вопросов 9, скопируйте блок 3 раза. Если 4, тогда 4 создаете и копируете блок
<!-- Делаем аккордеон Тильда в 2 колонки автоскейл | youx.agency -->
<!-- https://youx.agency/delaem-akkordeon-tilda-avtoskejl -->

<style>

/* Контейнер, внутри которого будут элементы */
.t-container {
    max-width: 99% !important;  /* Устанавливаем максимальную ширину */
    display: flex;              /* Используем flexbox для размещения элементов в ряд */
    flex-wrap: wrap;            /* Разрешаем перенос элементов на новую строку, если нужно */
    gap: 20px;                  /* Отступ между колонками */
}

/* Каждый элемент будет занимать 33.33% ширины контейнера на ПК */
.t-col_12 {
    max-width: 33.33%;          /* Устанавливаем максимальную ширину элемента в 33.33% */
    flex: 1;                    /* Гарантируем, что элементы будут растягиваться по ширине */
    box-sizing: border-box;     /* Чтобы padding и border не выходили за пределы ширины */
}

/* Убираем отступ у последнего элемента */
.t-container .t-col_12:last-child {
    margin-right: 0;            /* Убираем правый отступ у последнего элемента */
}

/* Убираем отступы слева для .t-col */
.t-col {
    margin-left: 0px;
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 1024px) {
    /* Стили для мобильных устройств */
    .t-container {
        flex-direction: column;  /* Элементы выстраиваются в столбик */
        gap: 10px;               /* Уменьшаем отступ между элементами */
    }

    .t-col_12 {
        max-width: 100%;         /* Устанавливаем ширину элемента в 100% */
    }
}

</style>

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