Отступы моих ZERO блоков в мобильной версии сайта долгое время отличались от стандартных блоков TILDA и меня это очень раздражало, но я не мог понять как решить эту проблему.
Прыгающие отступы слева в мобильной версии сайта на Tilda
Я открывал Тильду выстаивал элементы ровно по сетке в мобильной версии, но в итоге получал разные отступы для мобильных и стандартных блоков.
Я даже дописал CSS-правило, которое изменяло отступы у стандартных блоков, но в итоге решение оказалось проще
Причины проблемы и решение
Проблема скрыта в том, что блоки ZERO и блоки стандартных блоков TILDA, по разному настроены в CSS коде и ведут себя подругому в зависимости от ширины экрана в мобильной версии, а ширина экранов телефонов очень разная.
Чтобы решить данную проблему, нужно подстроить поведение блоков под стандартные и проблема будет решена.
Для этого: 1) вы переходите в мобильной версию сайта
2) выбираете каждый элемент, который должен касаться вашей направляющей, выбираете для него WINDOW CONTAINER , а в качестве отступа по оси Х указываете 20px
3) делаете это для всех элементов в ZERO блоке
4) Еще вы можете задать ширину блока в процентах. Для это кликаете в конце строки W____ 370 на "PX", но имейте ввиду, что блок с текстом в таком случае могут наезжать друг на друга и поэтому тестируйте на разных ширинах экрана
Всем счастья и ровных сеток в мобильных версиях.
По вопросу подгонки ваших сайтов можете писать сюда
https://t.me/mislawsky
Еще я помогаю бизнесам настраивать интеграции сайтов на Тильде с различными сервисами API.
Могу улучшить ваш сайт и доработать те блоки, которых нет в JavaScript.
Вместе, с агентством помогаю настраивать эффективную рекламу за лиды.
Незачем так долбаться, проще подогнать все стандартные блоки под грид зеро-блока.
Вот код для секции 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рх по краям.
Комментарий удален модератором
Комментарий удален модератором
Спасибо огромное, добрый человек!
Спасибо за ценные указания! Очень полезная статья)
Спасибо за статью! Это решение сработало лучше, чем предложенный код в комментариях, хотя я, может, уже с сеткой в зеро что-то намудрила