Адаптив текста в стандартных блоках Тильда

Главная
/
Модификации
/
Адаптив текста в стандартных блоках

Смотрите подробную инструкцию и код ниже

Адаптив текста в стандартных блоках

Смотреть

Вкладка "Обложка" из библиотеки блоков

Вкладка "О проекте" из библиотеки блоков

Вкладка "Заголовок" из библиотеки блоков

Вкладка "Текстовый блок" из библиотеки блоков

Вкладка "Изображение" из библиотеки блоков

Вкладка "Ключевая фраза" из библиотеки блоков

Вкладка "Прямая речь" из библиотеки блоков

Вкладка "Преимущества" из библиотеки блоков

FR101; .t508 .t-section__title; .t508 .t-section__descr; .t508__bottommargin; ; .t508__textwrapper > .t-descr ; ; ;.t508__bgimg FR102; .t512 .t-section__title; .t512 .t-section__descr; .t512__bottommargin; ; .t512__textwrapper > .t-descr; ; ;.t512__bgimg FR103; .t510 .t-section__title; .t510 .t-section__descr; .t510__bottommargin; ; .t510__textwrapper > .t-descr; ; ; FR201; .t490 .t-section__title; .t490 .t-section__descr; .t490 .t-heading_md; ; .t490__wrappercenter > .t-descr ; ; ; .t490__img FR202; .t498 .t-section__title; .t498 .t-section__descr; .t498__title; ; .498__descr; ; ; .t498__bgimg FR203; .t499 .t-section__title; .t499 .t-section__descr; .t499__title; ; .t499__blockdescr; ; ; .t499__img FR204; .t497 .t-section__title; .t497 .t-section__descr; .t497__name; ; .t497__descr; ; ; .t497__img FR205; .t491 .t-section__title; .t491 .t-section__descr; .t491__title; ; .t491__descr; ; ; .t491__img FR206; .t503 .t-section__title; .t503 .t-section__descr; .t503__title; ; .t503__descr; ; ; .t503__img FR207; .t820 .t-section__title; .t820 .t-section__descr; .t820__bottommargin; ; .t820__textwrapper > .t-descr; ; ; .t820__bgimg FR208; .t905 .t-section__title; .t905 .t-section__descr; .t905__title; ; .t905__descr; ; ; FR301; .t509 .t-section__title; .t509 .t-section__descr; .t509__title; ; .t509__descr; ; ; FR302; .t493 .t-section__title; .t493 .t-section__descr; .t493__heading; ; .t493__descr; ; ; .t493__bgimg FR303; .t500 .t-section__title; .t500 .t-section__descr; .t500 .t-name; ; .t500__descr; ; ; .t500__bgimg FR304; .t908 .t-section__title; .t908 .t-section__descr; .t908__heading; ; .t908__descr; ; ; FR305; .t938 .t-section__title; .t938 .t-section__descr; .t938__feature-title; ; .t938__feature-description; ; ; .t938__feature-icon FR306; .t1000 .t-section__title; .t1000 .t-section__descr; .t1000__textwrapper > .t-name; ; .t1000__textwrapper > .t-descr; ; ; .t1000__imgwrapper FR307; .t998__title; .t998__descr; .t998__item-text; ; ; ; ; .t998__item-img FR401; .t502 .t-section__title; .t502 .t-section__descr; .t502__title; ; .t502__blockdescr; .t502__circle; ; FR402; .t495 .t-section__title .t495 .t-section__descr; .t495__col .t-heading; ; .t495__col .t-descr; ; ; FR403; .t501 .t-section__title; .t501 .t-section__descr; .t501__title; ; .t501__text; ; ; FR404; .t504 .t-section__title; .t504 .t-section__descr; .t504__title; .t504__uptitle; .t504__descr; ; ; FR405; .t505 .t-section__title; .t505 .t-section__descr; .t505__title; .t505__subtitle; ; .t505__number; FR406; .t899 .t-section__title; .t899 .t-section__descr; .t899__title; ; .t899__descr; .t899__symbol; ; FR407; .t920 .t-section__title; .t920 .t-section__descr; .t920__title; ; .t920__descr; .t920__symbol; ; FR501; .t506 .t-section__title; .t506 .t-section__descr; .t506__title; ; .t506__text; ; ; FR502; .t408__textwrapper >.t408__title; .t408__textwrapper > .t408__descr; .t408__wrapper > .t-name ; ; .t408__descr; ; ; .t408__img FR601; .t939 .t-section__title; .t939 .t-section__descr ; .t939__card-title; ; .t939__card-descr; ; ; FR602; .t940 .t-section__title; .t940 .t-section__descr; .t940__card-title; ; .t940__card-descr; ; ;

Вкладка "Колонки" из библиотеки блоков

Вкладка "Список страниц" из библиотеки блоков

Вкладка "Плитка и ссылка" из библиотеки блоков

Вкладка "Форма и кнопка" из библиотеки блоков

Вкладка "Магазин" из библиотеки блоков

Вкладка "Команда" из библиотеки блоков

Вкладка "Отзывы" из библиотеки блоков

Вкладка "Расписание" из библиотеки блоков

Вкладка "Этапы" из библиотеки блоков

Вкладка "Контакты" из библиотеки блоков

Вкладка "Услуги" из библиотеки блоков

Вкладка "Тарифы" из библиотеки блоков

Вкладка "Новости и потоки" из библиотеки блоков

Готовый код

Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему

   <!--https://dsgnmax.ru/adaptive-standart-block--> <style>
/*Разрешение экрана от 640 до 1200px (планшет вертикальный и горизонтальный*/

@media screen and (max-width:1200px){
    /*Надзаголовок*/
    .t001__uptitle {    /*Сюда вставляем нужный класс из таблицы*/
        font-size: 5px !important;
    }
    
    /*Заголовок*/
    .t001__title {
        font-size: 10px !important;
    }
    
    /*Подзаголовок*/
        .t001__title {
    font-size: 10px !important;
    }
    
    /*Описание*/
    .t001__descr{
        font-size:55px !important;
    }
    
    /*Иконка*/
    .t001__img{
        width:40px !important;
        height:40px !important;
    }
}


/*Разрешение экрана от 0 до 640px (мобилка вертикальная и горизонтальная*/
@media screen and (max-width:640px){
    /*Надзаголовок*/
    .t001__uptitle {  
        font-size: 5px !important;
    }
    
    /*Заголовок*/
    .t001__title {
        font-size: 10px !important;
    }
    
    /*Подзаголовок*/
    .t001__title {
        font-size: 10px !important;
    }
    
    /*Описание*/
    .t001__descr{
        font-size:5px !important;
    }
    
    /*Иконка*/
    .t001__img{
        width:40px !important;
        height:40px !important;
    }
    /*и так далее дублируем классы, которые нужно будет адаптировать в рамках этого разрешения*/
}

/*при необходимости можно менять цвета, отступы у элементов с классами из таблицы под каждое разрешение*/
</style>