Задаем разные настройки CSS для разрешений экранов в Тильде.
При разработке сайта иногда требуется изменить стандартные стили блока в Tilda так, чтобы они применялись только к определённому разрешению экрана. В этом поможет использование медиа-запросов.
Инструкция:
При разработке сайта иногда требуется изменить стандартные стили блока в 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>