Как сохранить сетку в мобильной версии сайта на Tilda при использовании ZERO блока

Отступы моих ZERO блоков в мобильной версии сайта долгое время отличались от стандартных блоков TILDA и меня это очень раздражало, но я не мог понять как решить эту проблему.

вот так выглядит моя проблема c разными отступами.
вот так выглядит моя проблема c разными отступами.

Прыгающие отступы слева в мобильной версии сайта на Tilda

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

Как сохранить сетку в мобильной версии сайта на Tilda при использовании ZERO блока

Причины проблемы и решение

Проблема скрыта в том, что блоки ZERO и блоки стандартных блоков TILDA, по разному настроены в CSS коде и ведут себя подругому в зависимости от ширины экрана в мобильной версии, а ширина экранов телефонов очень разная.
Чтобы решить данную проблему, нужно подстроить поведение блоков под стандартные и проблема будет решена.

Для этого: 1) вы переходите в мобильной версию сайта

2) выбираете каждый элемент, который должен касаться вашей направляющей, выбираете для него WINDOW CONTAINER , а в качестве отступа по оси Х указываете 20px

3) делаете это для всех элементов в ZERO блоке

4) Еще вы можете задать ширину блока в процентах. Для это кликаете в конце строки W____ 370 на "PX", но имейте ввиду, что блок с текстом в таком случае могут наезжать друг на друга и поэтому тестируйте на разных ширинах экрана

Как настроить правильно отступы в TILDA ZERO блоке Антон Миславский
Как настроить правильно отступы в TILDA ZERO блоке Антон Миславский

Всем счастья и ровных сеток в мобильных версиях.
По вопросу подгонки ваших сайтов можете писать сюда
https://t.me/mislawsky

Еще я помогаю бизнесам настраивать интеграции сайтов на Тильде с различными сервисами API.
Могу улучшить ваш сайт и доработать те блоки, которых нет в JavaScript.
Вместе, с агентством помогаю настраивать эффективную рекламу за лиды.

66
4 комментария

Незачем так долбаться, проще подогнать все стандартные блоки под грид зеро-блока.

Вот код для секции T123:

<style>
/*Максимальная ширина смартфона где будет применяться эффект сетки зеро-блока*/
@media screen and (max-width: 480px) {
/*Отступы слева и справа до контента в Grid-контейнере*/
.t-col { padding: 0 10px !important; }
/*Это максимальная ширина контейнера в зеро-блоке, при отображении мобильного*/
.t-container { max-width: 320px !important; }
}
</style>

Этот код выстраивает ВСЕ стандартные блоки по сетке ZERO-block с учетом отступов 10рх по краям.

5
Ответить

Спасибо огромное, добрый человек!

1
Ответить

Спасибо за ценные указания! Очень полезная статья)

Ответить

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

Ответить