← Назад в «Блог»
64

Изменение отступов на мобильной версии блоков Тильда

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

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

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

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

Проблема

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

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

Изменение отступов на мобильной версии блоков Тильда 1

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

Изменение отступов на мобильной версии блоков Тильда 2

Решение

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

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

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

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

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

Изменение отступов на мобильной версии блоков Тильда 3

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

Изменение отступов на мобильной версии блоков Тильда 4

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

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

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

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

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

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

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

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

Пишем код

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

Изменение отступов на мобильной версии блоков Тильда 6

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

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

Дальше мне нужно взять класс, который я нашел в прошлом шаге — t-rec_pb90 и написать для него другой отступ. Сейчас он 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>

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

Изменение отступов на мобильной версии блоков Тильда 7

Результат

Изменение отступов на мобильной версии блоков Тильда 8

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

Изменение отступов на мобильной версии блоков Тильда 9

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

Изменение отступов на мобильной версии блоков Тильда 10

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

Осторожно

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

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

Полезно
1
1
Непонятно
0
Поделиться
Отправить
Линкануть
Вотсапнуть
← Назад в «Блог»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *