|
|
(Не показано 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; |
| } | | } |
|
| |
|
| /* По умолчанию (до 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; |
Рядок 85: |
Рядок 90: |
| } | | } |
| }} | | }} |
|
| |
| <div class="flex-container"> | | <div class="flex-container"> |
| {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} | | {{#if: {{{1|}}} | <div class="mainpage-card">{{{1}}}</div> }} |