« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
m grid 3 |
Aucun résumé des modifications |
||
| Ligne 748 : | Ligne 748 : | ||
==================================== */ | ==================================== */ | ||
/* Grille 3 colonnes | /* Grille 3 colonnes */ | ||
.home-cards-grid-3 { | .home-cards-grid-3 { | ||
display: grid; | display: grid !important; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(3, 1fr) !important; | ||
gap: 20px; | gap: 20px; | ||
margin: 20px 0; | margin: 20px 0; | ||
width: 100%; | |||
} | } | ||
/* Grille 2 colonnes */ | /* Grille 2 colonnes */ | ||
.home-cards-grid-2 { | .home-cards-grid-2 { | ||
display: grid; | display: grid !important; | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr) !important; | ||
gap: 20px; | gap: 20px; | ||
margin: 20px 0; | margin: 20px 0; | ||
width: 100%; | |||
} | } | ||
/* Grille 1 colonne (pleine largeur) */ | /* Grille 1 colonne (pleine largeur) */ | ||
.home-cards-grid-1 { | .home-cards-grid-1 { | ||
display: grid; | display: grid !important; | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr !important; | ||
gap: 20px; | gap: 20px; | ||
margin: 20px 0; | margin: 20px 0; | ||
width: 100%; | |||
} | |||
/* Force les cards enfants à respecter la grille */ | |||
.home-cards-grid-3 > *, | |||
.home-cards-grid-2 > *, | |||
.home-cards-grid-1 > * { | |||
width: 100% !important; | |||
max-width: none !important; | |||
margin: 0 !important; | |||
} | } | ||
| Ligne 776 : | Ligne 788 : | ||
==================================== */ | ==================================== */ | ||
/* Tablette : 2 colonnes | /* Tablette : 3 colonnes → 2 colonnes */ | ||
@media (max-width: | @media (max-width: 1024px) { | ||
.home-cards-grid- | .home-cards-grid-3 { | ||
grid-template-columns: 1fr; | grid-template-columns: repeat(2, 1fr) !important; | ||
} | } | ||
} | } | ||
/* Mobile : | /* Mobile : tout passe en 1 colonne */ | ||
@media (max-width: | @media (max-width: 768px) { | ||
.home-cards-grid { | .home-cards-grid-2, | ||
grid-template-columns: 1fr; | .home-cards-grid-3 { | ||
grid-template-columns: 1fr !important; | |||
} | } | ||
} | } | ||