2024-05-04 11:40 Инструкции

Как разграничить свойства CSS на разных разрешениях в Тильде

Задаем разные настройки CSS для разрешений экранов в Тильде.

При разработке сайта иногда требуется изменить стандартные стили блока в Tilda так, чтобы они применялись только к определённому разрешению экрана. В этом поможет использование медиа-запросов.

Инструкция:

Создайте блок Т123 и вставьте код из примера. (Мы рекомендуем добавлять блок в Footer сайта, чтобы код применялся ко всем страницам и его не нужно было копировать.)
Отредактируйте код, заменив классы и свойства на нужные в каждом разрешении из примера.
Обновите все страницы сайта.


<style>
 @media screen and (max-width: 480px) { .t-store__grid-cont .t-col, .t-store__grid-cont .t-store__stretch-col {
     /*CSS-Код для разрешения 0-480px*/
  margin-bottom: 20px; !important;
}}
 @media screen and (min-width: 481px) and (max-width: 640px) { .t-store__grid-cont .t-col, .t-store__grid-cont .t-store__stretch-col {
    
  margin-bottom: 20px; !important;
     /*CSS-Код для разрешения 480px-640px*/
  
}}
 @media screen and (min-width: 640px) and (max-width: 960px) { .t-store__grid-cont .t-col, .t-store__grid-cont .t-store__stretch-col {
    
  margin-bottom: 20px; !important;
     /*CSS-Код для разрешения 640px-960px*/
  
}}
 @media screen and (min-width: 960px) and (max-width: 1200px) { .t-store__grid-cont .t-col, .t-store__grid-cont .t-store__stretch-col {
    
  margin-bottom: 20px; !important;
     /*CSS-Код для разрешения 960px-1200px*/
  
}}
 @media screen and (min-width: 1200px) { .t-store__grid-cont .t-col, .t-store__grid-cont .t-store__stretch-col {
    
  margin-bottom: -60px; !important;
     /*CSS-Код для разрешения 1200px+*/
  
}}
</style>

Команда Cubeteam