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

Матеріал з Вікіпедія ЄСІТС
Перейти до навігації Перейти до пошуку
 
(Не показано 6 проміжних версій цього користувача)
Рядок 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 48px;             /* Отступы по бокам */
   padding: 0 32px;            
}
}


/* По умолчанию (до 767px) — одна колонка */
/* По умолчанию (mobile-first) — одна колонка */
.mainpage-card {
.mainpage-card {
   flex: 0 0 100%;
   flex: 0 0 100%;
Рядок 27: Рядок 27:
}
}


/* От 768px до 1199px — две колонки */
/* Две колонки (пример) */
@media (min-width: 768px) and (max-width: 1199px) {
@media (min-width: 768px) and (max-width: 1199px) {
   .mainpage-card {
   .mainpage-card {
Рядок 34: Рядок 34:
}
}


/* От 1200px и выше — три колонки */
/* Три колонки (пример) */
@media (min-width: 1200px) {
@media (min-width: 1200px) {
   .mainpage-card {
   .mainpage-card {
     flex: 0 0 calc((100% - 40px) / 3);
     flex: 0 0 calc((100% - 40px) / 3);
  }
}
/* >>> ВАЖНО: уменьшаем отступы на мобильных (до 767px) <<< */
@media (max-width: 767px) {
  .flex-container {
    margin: 20px auto;    /* вместо 40px, чтобы уменьшить верх/низ */
    padding: 0 10px;      /* вместо 32px, чтобы карточка стала шире */
   }
   }
}
}
Рядок 56: Рядок 64:
}
}


/* Блок для изображения */
.mainpage-card .image {
.mainpage-card .image {
   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%;
}
}


/* Изображение внутри карточки */
.mainpage-card .image img {
.mainpage-card .image img {
   width: 100%;       /* Подстраивается под ширину родительского блока */
   width: 100%;
   height: auto;       /* Пропорции сохраняются */
   height: auto;
   max-width: 100%;   /* Не выходит за пределы контейнера */
   max-width: 100%;
   object-fit: contain;
   object-fit: contain;
   display: block;
   display: block;
Рядок 79: Рядок 84:


.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