Выравниваем контент в стандартных блоках в Тильде по ширине на мобильных (код, CSS)

Проблема: Если Вы используете на сайте стандартные блоки и ZERO, верстаете в grid, можете столкнуться с тем, на мобильных устройствах ширина контента в стандартных блоках сильно отличается от ширины в zero-блоках.

Например, Вы сверстали блок с текстом, задали ему ширину на мобильных устройствах 300px. Следующий блок Вы добавили стандартный, например, TX01. На мобильных TX01 будет иметь другую ширину и другой отступ, что выглядит неаккуратно.

Для того, чтобы это исправить, нужно добавить блок T123 и код. Для данного примера (стандартный блок TX01) подходит следующий код:

<style>
@media screen and (max-width: 480px){
.t-text {
width: 300px !important;
padding-left: 20px !important;
}
}
</style>

Заходим в браузер Firefox Developer Edition - Mozilla.
Рядом с поисковой строкой нажимаем на иконку Гаечный ключ, выбираем Адаптивный дизайн и нужное устройство, например, Iphone 11 pro. Перед нами открывается вид сайта на соответствующем устройстве.

Кликаем по контенту правой кнопкой мыши. Выбираем пункт Исследовать. Затем кликаем на иконку Выбрать элемент со страницы (скриншот).

Тыкаем на интересующий элемент: в нашем случае, на текстовый блок. Слева мы видим код и класс элемента. В средней колонке, в данном случае, видим стили элемента – цвет, шрифт, размер, насыщенность и прочее. И справа мы видим разметку блока. В данном случае, нам нужно задать для элемента с классом .t-text на устройствах @media screen and (max-width: 480px), то есть на мобильных, такие же параметры, как и для нашего ZERO-блока:


width: 300px
padding-left: 20px

То есть мы меняем ширину и внутренний отступ. Вы можете задать эти параметры в разметке и увидите, что расположение и ширина контента изменились. Если это не сработало, то попробуется воздействовать на другой селектор (выберите другой элемент).

Теперь нам нужно из полученных данных создать рабочий код.

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

В нашем случае это:
@media screen and (max-width: 480px). Пишем.

После этого ставим символ {

Затем пишем класс элемента, для которого будем применять стиль. В нашем случае, это .t-text (перед названием класса ставим всегда точку). Затем снова символ {

И затем сами параметры:

width: 300px !important;
padding-left: 20px !important;

(!important повышает приоритет нашего пользовательского стиля).

Затем закрываем параметры также двумя фигурными скобками:

}
}

Теперь осталось заключить код в теги:

<style> - в начале

</style> - в конце

И получаем:

<style>
@media screen and (max-width: 480px){
.t-text {
width: 300px !important;
padding-left: 20px !important;
}
}
</style>

Таким образом, Вы можете кастомизировать любые элементы на сайте на Тильде – менять отступы, цвета, радиусы скругления, добавлять тени и многое другое, что касается стилей элементов. Размеры, ширину, высоту блоков можно задавать также в %, hv, vw (при «резиновой» верстке).

Есть 3 способа вставки кода для добавления пользовательских стилей:

1. Добавить блок T123 на страницу, на которой требуется внести изменения и вставить в него код в вышеуказанном формате (код должен начинаться с тега <style> и заканчиваться </style>);
2. Добавить код (таким же способом, как и в пункте 1) в футер или в хэдер, чтобы воздействовать на стиль элементов с таким же классом на всех страницах, где есть футер/хэдер;
3. Добавить код в Настройки сайта – Еще – Пользовательские CSS-стили. В этом случае теги <style> и </style> в начале и в конце кода не потребуются.