Как убрать белые поля в презентации Tilda T203

При создании слайд-шоу на Тильде через блок T203 многие сталкиваются с проблемой: в некоторых браузерах (особенно Safari и старых версиях Chrome) сверху и снизу слайдов появляются белые поля (отступы). Стандартные настройки блока - ширина 100% и выравнивание по центру - не всегда решают проблему. Разберём, как полностью убрать эти пробелы, не используя автоскейл.

Почему появляются белые поля?

Блок T203 в Tilda создаёт контейнер с внутренними отступами (padding) для адаптивности. В некоторых браузерах эти отступы не обнуляются автоматически. Основные причины:

• Браузерные стили по умолчанию (user-agent stylesheet) добавляют margin у body или padding у контейнера.
• Слайды имеют фиксированную высоту, а контейнер блока - нет.
• Особенности рендеринга WebKit (Safari, старый Edge).

Пошаговое решение

Шаг 1: Проверьте настройки самого блока T203

В редакторе Тильды выберите блок T203 и в панели настроек установите:

• Ширина контейнера: Window container (100% ширины окна).
• Выравнивание: По центру.
• Отступы блока: Снимите все галочки, если они есть (обычно их нет, но стоит проверить).

Если поля остались - переходим к кастомному коду.

Шаг 2: Добавьте CSS в блок T203

Откройте настройки блока, перейдите на вкладку «Настройки» → «Дополнительно» → «CSS-класс для блока». Введите, например, no-padding-slider. Затем перейдите в «Настройки» → «Дополнительно» → «CSS-код для блока» и вставьте:

.no-padding-slider {
  padding: 0 !important;
  margin: 0 !important;
}
.no-padding-slider .t-slds__wrapper {
  padding: 0 !important;
}
.no-padding-slider .t-slds__slide {
  padding: 0 !important;
}

Этот код обнуляет отступы на уровне блока, контейнера слайдов и каждого слайда. Важно использовать !important, чтобы перебить браузерные стили.

Шаг 3: Исправьте HTML-обёртку (если CSS не помог)

В редких случаях помогает добавление атрибута style к корневому элементу слайда. Для этого в настройках блока T203 перейдите на вкладку «Слайды» → выберите слайд → в поле «HTML-код перед слайдом» вставьте:

<div style="padding:0; margin:0;">

А в поле «HTML-код после слайда» - </div>. Это создаст дополнительную обёртку с нулевыми отступами.

Дополнительный совет: проверьте настройки сайта

Иногда белые поля появляются из-за глобальных стилей сайта. Зайдите в «Настройки сайта» → «CSS-код» и добавьте:

.t-container, .t-container_100 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.t-slds {
  padding: 0 !important;
}

Это обнулит отступы у всех контейнеров Тильды, что может повлиять на другие блоки - используйте с осторожностью.

Почему нельзя использовать автоскейл?

Автоскейл (автоматическое масштабирование) меняет соотношение сторон слайда, что искажает изображения и контент. Наше решение сохраняет оригинальные пропорции, просто убирая лишние отступы.

После внесения изменений обязательно проверьте презентацию в нескольких браузерах: Chrome, Firefox, Safari, Яндекс.Браузер. В большинстве случаев белые поля исчезают.