Размер шрифта в мобильной версии стандартных блоков на Tilda

Стандартные текстовые блоки на конструкторе сайтов Tilda имеют такое свойство, как менять размер шрифта в мобильной версии.
Вы почти всегда получаете сайт с разным размером шрифтов в разных блоках. Это портит впечатление от любого дизайна, а если вы используете ZERO блок, где вы всё контролируете, то получается полный хаос, но так приятно и так хочется использовать стандартные блоки чтобы не править потом в ZERO все 5 адаптивных версий, когда клиент поменял одну строчку на сайте.

Здесь нам на помощь приходит CSS

1.Создаем блок в Tilda с HTML кодом 123

2. Копируем в него вот это

<style type=text/css> @media screen and (max-width: 640px) { Этот текст заменим кодом из пункта 5-6 } </style>

3. Идём в браузер Chrome открываем его в режиме Inspect (правой кнопкой мыши по странице и самая нижняя строчка)

4. Ищем значок на открывшейся панели с иконкой телефона. Жмём её - сайт превращается в мобильную версию

5. Далее ищем все блоки текста на нашей странице, которые выглядит меньше нужного размера шрифта. Не забываем , что есть меню, футер, header, попапы. копируем их CSS-селекторы.

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

@media screen and (max-width: 639px) .t-text_md { font-size: 12px; line-height: 1.45; }

6. Копируем этот селектор вместе с закрывающими скобками внутрь скобок из пункта 2 , меняем шрифт на нужный. Например на 16px и сохраняем и закрываем наш блок HTML 123.

Получаем:

<style type=text/css> @media screen and (max-width: 640px){ .t-text_md { font-size: 16px; } .t977__menu { font-size: 16px;} .t450__right_descr { font-size: 16px; } .t-text_xs { font-size: 16px; } .t-descr_xl { font-size: 16px; } } </style>

7. Переопубликуем страничу. Чих-пых всё готов.Ставим лайк подписываемся на канал :)

Если нужна помощь в digital-маркетинге для ваших клиентов. https://antonmislawsky.com/taplink

88
8 комментариев

инструкция очень удобная! спасибо большое

Ответить

Спасибо! не получается изменить размер букв в мобильном меню, у этого метода есть такое ограничение?

Ответить

Конечно, зависит от того какой блок вы хотите поменять

Ответить

Спасибо!

Ответить

Не работает. Без @media screen меняется размер, с ним нет.

Ответить

не могу здесь ничего прокомментрировать. Не видя проект. У меня работает данная конфигурация

Ответить

Аналогично! Работает без @media screen

Ответить