Contenu principal
Ce bloc prend toute la largeur sur mobile, puis partage l'espace avec la sidebar sur tablette et desktop.
Ce bloc prend toute la largeur sur mobile, puis partage l'espace avec la sidebar sur tablette et desktop.
Base mobile (sans media query)
.container { width: 100%; padding: 15px; }
.nav-menu {
display: flex;
flex-direction: column;
gap: 5px;
}
.content { display: block; }
.sidebar { display: none; }
Tablette — min-width: 768px
@media (min-width: 768px) {
.nav-menu { flex-direction: row; gap: 16px; }
.content { display: grid; grid-template-columns: 1fr 220px; gap: 20px; }
.sidebar { display: block; }
}
Desktop — min-width: 1024px
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
.content { grid-template-columns: 1fr 280px; }
}