Відмінності між версіями «Шаблон:Mainpage»

Матеріал з Вікіпедія ЄСІТС
Перейти до навігації Перейти до пошуку
 
(Не показано 8 проміжних версій цього користувача)
Рядок 2: Рядок 2:
.flex-container {
.flex-container {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;              
  /* карточки переносятся вниз, если не помещаются */
   justify-content: space-between;
   justify-content: space-between;
   gap: 20px;               /* расстояние между карточками */
   gap: 20px;                  
   margin: 40px auto;       /* отступ сверху/снизу */
   margin: 40px auto;          
   padding: 0 64px;         /* отступы слева/справа */
   padding: 0 32px;            
}
}


/* По умолчанию (мобильные устройства до 1024px): одна колонка */
/* По умолчанию (mobile-first) — одна колонка */
.mainpage-card {
.mainpage-card {
   flex: 0 0 100%;
   flex: 0 0 100%;
Рядок 28: Рядок 27:
}
}


/* При ширине экрана от 1024px до 1439px: две колонки */
/* Две колонки (пример) */
@media (min-width: 1024px) and (max-width: 1439px) {
@media (min-width: 768px) and (max-width: 1199px) {
   .mainpage-card {
   .mainpage-card {
     flex: 0 0 calc((100% - 20px) / 2);
     flex: 0 0 calc((100% - 20px) / 2);
    /* 1 горизонтальный gap = 20px, значит вычитаем 20px из 100%, делим на 2 */
   }
   }
}
}


/* При ширине экрана от 1440px и выше: три колонки */
/* Три колонки (пример) */
@media (min-width: 1440px) {
@media (min-width: 1200px) {
   .mainpage-card {
   .mainpage-card {
     flex: 0 0 calc((100% - 40px) / 3);
     flex: 0 0 calc((100% - 40px) / 3);
    /* 2 горизонтальных gap (три колонки => два «пробела») = 2 * 20px = 40px */
  }
}
 
/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */
@media (max-width: 767px) {
  .flex-container {
    margin: 20px auto;    /* вместо 40px, чтобы уменьшить верх/низ */
    padding: 0 10px;      /* вместо 32px, чтобы карточка стала шире */
   }
   }
}
}
Рядок 62: Рядок 67:
   height: auto;
   height: auto;
   min-height: 140px;
   min-height: 140px;
  max-height: 200px;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   margin-bottom: 1.2em;
   margin-bottom: 0.5em;
   width: 100%;
   width: 100%;
}
}
Рядок 75: Рядок 79:
   max-width: 100%;
   max-width: 100%;
   object-fit: contain;
   object-fit: contain;
  display: block;
  margin: 0 auto;
}
}


.CategoryTreeItem {
.CategoryTreeItem {
   font-size: 1.15em !important;
   font-size: 1.1em !important;
   line-height: 1.7 !important;
   line-height: 1.7 !important;
   text-align: left !important;
   text-align: left !important;

Поточна версія на 02:29, 5 квітня 2025







Отримано з http://wiki.court.gov.ua/index.php?title=Шаблон:Mainpage&oldid=6430