Месяц: Январь 2023

Стандартные блоки на Тильде дают править отступы сверху и снизу только в комьютерной версии. На других разрешениях это изменить нельзя.

Дизайнеры на Тильде выходят из этой ситуации, создавая копии блоков для других разрешений.

Наглядно, но сайт из 10 блоков легким движением копирования превращается в сайт на 30 блоков. Если нужно поменять текст — нужно будет менять в 3 блоках сразу.

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

Проблема

Сегодня сел дорабатывать сайт по Нюансам Фриланса и столкнулся с этой же задачей. У меня страница с уроками. По структуре два повторяющихся блока: заголовок + видео.

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

На ПК отступы окей, но на мобильном воообще мрак

Решение

Решать будем кодом. Чтобы создать код, который не будет рассыпаться при добавлении новых блоков нужно два условия:

1. Одинаковость типов блоков
2. Одинаковые отступы

Это поможет подхватить нужные классы кодом и поменять в них отступы.

Открываем консоль и ищем стили

Консоль открывается везде по разному, зависит от системы и браузера. Нам нужно что-то похожее на это:

Слева у нас страница, посередине html-код, справа стили. Нам надо найти блоки наших элементов с проблемными отступами и посмотреть что у них общего.

Я посмотрел, нашел общее у моих элементов:

• У заголовков отступ сверху
• У видео оступ снизу

Ищем стили в правой части

За отступы снизу и сверху отвечают стили padding и margin. Отличаются тем, что если у блока есть например фон, то padding будет увеличивать этот фон, расширяя блок изнутри. А margin не будет расширять блок, он словно отталкивается от остальных.

• margin-top — внешний сверху
• margin-bottom — внешний снизу
• padding-top — внутренний сверху
• padding-bottom — внутренний снизу

Пошел искать их у элементов.

1. У блока видео нашел стиль с отступом снизу.
2. Ниже увидел, что есть такой класс, который назначает такой же стиль.
3. В html увидел класс, который стоит у каждого видео.

Когда определили общий класс, к которому можно прицепиться — можно писать код.

Пишем код

В тильде внизу на странице создаю блок T123

Открываю и начинаю писать первое — определение разрешения. Что тут меняется, так это max-width и 480px. Все стили внутри этого участка будут срабатывать только при разрешении экрана меньше 480px. То есть на телефонах.

<style>
    @media only screen and (max-width: 480px) {
        
    }
</style>

Дальше мне нужно взять класс, который я нашел в прошлом шаге — t-rec_pb₉₀ и написать для него другой отступ. Сейчас он 90px, а мне надо 40px.

<style>
    @media only screen and (max-width: 480px) {
        .t-rec_pb_90 {
           padding-bottom: 40px;
        }
    }
</style>

Но такой код не сработает, потому что стили Тильды сильные, они перешибут наши. Подмога — свойство! important. Оно как супермен с молотком Тора. Добавляем в конце.

Было padding-bottom: 40px;
Стало padding-bottom: 40px! important;

<style>
    @media only screen and (max-width: 480px) {
        .t-rec_pb_90 {
           padding-bottom: 40px !important;
        }
    }
</style>

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

Результат

Нет дублирования кучи заголовков для всех разрешений.

На мобильном стили применились, отступы уменьшились.

Мы перебили нашими стилями стили Тильды.

Осторожно

Классы общие. То есть мы меняем вообще все блоки, где установлены такие оступы. Можно поломать другие блоки.

Я обновлю статью позже и расскажу о другом способе.