|
|
Рядок 1: |
Рядок 1: |
| {{#css: | | {{#css: |
| .flex-container { | | .flex-container { |
| display: flex; /* Включаем флекс */ | | display: flex; |
| flex-wrap: wrap; /* Разрешаем перенос строк */ | | flex-wrap: wrap; |
| gap: 40px; /* Отступ между карточками */ | | /* карточки переносятся вниз, если не помещаются */ |
| justify-content: space-between; /* или center, в зависимости от желаемого выравнивания */ | | justify-content: space-between; |
| padding: 0 32px; | | gap: 20px; /* расстояние между карточками */ |
| margin: 40px auto;
| | margin: 40px auto; /* отступ сверху/снизу */ |
| | padding: 0 32px; /* отступы слева/справа */ |
| } | | } |
|
| |
|
| /* Каждая «карточка» */ | | /* По умолчанию (мобильные устройства до 1024px): одна колонка */ |
| .mainpage-card { | | .mainpage-card { |
| flex: 1 1 auto; /* Позволяет и сжиматься, и расти */ | | flex: 0 0 100%; |
| min-width: 280px; /* Минимальная ширина карточки */
| |
| /* max-width: 480px; Если нужно ограничить максимальную ширину, раскомментируйте */
| |
| background: #f6f6f6; | | background: #f6f6f6; |
| border: 1px solid #ddd; | | border: 1px solid #ddd; |
Рядок 26: |
Рядок 25: |
|
| |
|
| transition: transform 0.2s ease, box-shadow 0.2s ease; | | transition: transform 0.2s ease, box-shadow 0.2s ease; |
| | box-sizing: border-box; |
| | } |
| | |
| | /* При ширине экрана от 1024px до 1439px: две колонки */ |
| | @media (min-width: 1024px) and (max-width: 1439px) { |
| | .mainpage-card { |
| | flex: 0 0 calc((100% - 20px) / 2); |
| | /* 1 горизонтальный gap = 20px, значит вычитаем 20px из 100%, делим на 2 */ |
| | } |
| | } |
| | |
| | /* При ширине экрана от 1440px и выше: три колонки */ |
| | @media (min-width: 1440px) { |
| | .mainpage-card { |
| | flex: 0 0 calc((100% - 40px) / 3); |
| | /* 2 горизонтальных gap (три колонки => два «пробела») = 2 * 20px = 40px */ |
| | } |
| } | | } |
|
| |
|
Рядок 43: |
Рядок 59: |
| } | | } |
|
| |
|
| /* Блок с изображением внутри карточки */
| |
| .mainpage-card .image { | | .mainpage-card .image { |
| height: auto; | | height: auto; |
| min-height: 140px; | | min-height: 140px; |
| max-height: 200px; /* Можно убрать, если нужно больше свободы */ | | max-height: 200px; |
| display: flex; | | display: flex; |
| justify-content: center; | | justify-content: center; |
Рядок 63: |
Рядок 78: |
| } | | } |
|
| |
|
| /* Стили для CategoryTree */
| |
| .CategoryTreeItem { | | .CategoryTreeItem { |
| font-size: 1.15em !important; | | font-size: 1.15em !important; |