{"id":14293,"url":"\/distributions\/14293\/click?bit=1&hash=05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","hash":"05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","title":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0438 \u043a\u043e\u043f\u0435\u0439\u043a\u0438","buttonText":"","imageUuid":""}
Anton Mislawsky

Размер шрифта в мобильной версии стандартных блоков на 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

38 показов
10K открытий
0
8 комментариев
Написать комментарий...
 Anna Zlydenna

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

Ответить
Развернуть ветку
Diana Sviridenko

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

Ответить
Развернуть ветку
Anton Mislawsky
Автор

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

Ответить
Развернуть ветку
Tatiana Fomina

Спасибо!

Ответить
Развернуть ветку
Natasha Vo

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

Ответить
Развернуть ветку
Anton Mislawsky
Автор

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

Ответить
Развернуть ветку
Андрей Маркович

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

Ответить
Развернуть ветку
Vladimir Medvedev

Спасибо!

Ответить
Развернуть ветку
Написать комментарий...
5 комментариев
Раскрывать всегда