Данная инструкция поможет растянуть стандартный Tilda-блок T1119 (FAQ) на всю ширину экрана с отступами по краям экрана. Лично я использую его часто в последнее время в соседстве с Автоскейлом нулевых блоков.
Инструкция:
- Задайте класс вашему блоку T1119 - uc-faq
- Примените стили таким образом стобы слева был заголвок а справа карточки.
- Добавьте код в блок Т123.
<style>
/*
Основной контейнер с вопросами и ответами.
.t1119__container — стандартный класс Tilda для внутреннего контейнера FAQ-блока.
Мы нацеливаемся на него внутри блока с вашим кастомным классом uc-faq.
*/
.uc-faq .t1119__container {
/* Растягиваем контейнер на всю ширину viewport'а (а не на max-width Tilda) */
max-width: 100vw !important;
/* Горизонтальные отступы от краёв экрана */
padding: 0 50px !important;
/* Включаем box-sizing, чтобы padding не увеличивал ширину */
box-sizing: border-box;
/* Включаем CSS Grid — это основа новой раскладки */
display: grid !important;
/*
Автоматически создаём столько колонок, сколько помещается.
Минимум — 400px на карточку, максимум — 1fr (равномерное распределение).
*/
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
/* Вертикальный и горизонтальный отступы между карточками */
gap: 40px 20px !important;
/* Убираем стандартные отступы и выравнивание от Tilda */
margin: 0 !important;
}
/*
Убираем стандартные колонки Tilda (.t-col),
потому что в сетке они не нужны и могут мешать layout'у.
*/
.uc-faq .t-col {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/*
Убираем clearfix-элементы, которые Tilda иногда добавляет для float-раскладки.
Они могут ломать grid, добавляя лишнее пространство.
*/
.uc-faq .t1119__container::before,
.uc-faq .t1119__container::after {
display: none !important;
}
/*
АДАПТИВ: экраны до 1000px
— уменьшаем отступы по бокам,
— карточки теперь минимум 300px,
— вертикальный gap = 20px.
*/
@media screen and (max-width: 1000px) {
.uc-faq .t1119__container {
padding: 0 20px !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 20px !important;
}
}
/*
АДАПТИВ: экраны до 768px (планшеты)
— карточки минимум 280px.
*/
@media screen and (max-width: 768px) {
.uc-faq .t1119__container {
padding: 0 20px !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 20px !important;
}
}
/*
АДАПТИВ: мобильные устройства (до 480px)
— одна колонка,
— минимальный gap = 15px,
— padding по бокам = 20px.
*/
@media screen and (max-width: 480px) {
.uc-faq .t1119__container {
padding: 0 20px !important;
grid-template-columns: 1fr !important; /* одна колонка */
gap: 15px !important;
}
}
</style>Готово! Теперь ваш FAQ адаптивный и современный.
