|
|
(Не показано 9 проміжних версій цього користувача) |
Рядок 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; |
Рядок 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> }} |