Suite de l’épisode 2.
Au programme, le responsive et les finitions de la page d’accueil.
Les images
Si votre CSS n’avait qu’un seul sélecteur indispensable pour devenir responsive et s’afficher sur mobile, ce serait celui-ci.
img{ display:block; max-width:100%; height:auto; }
Ces quelques lignes vont empêcher les images d’être plus grandes que la fenêtre et maintenir leurs proportions. Le max-width:100%
correspond aussi au conteneur de l’image. Cette recette s’applique aussi pour contraindre l’image à sa cellule de grille.
Les cellules
En regardant notre code (de l’épisode 2), une seule cellule s’étend sur 2 colonnes (span 2), celle avec la classe l.
.l{ grid-column-end: span 2; /* ! ici */ grid-row-end:span 2; }
Pour contrer ceci, nous allons l’appliquer seulement à partir de 872px
@media (min-width:872px){ .l{ grid-column-end: span 2; grid-row-end:span 2; } }
et introduire une nouvelle règle par défaut pour la restreindre à 1 colonne.
.l{ grid-column-end: span 1; grid-row-end:span 1; } @media (min-width:872px){ .l{ grid-column-end: span 2; grid-row-end:span 2; } }
Et voilà.
Finitions
Finitions du header
:
/* décoration un peu complexe pour marquer la page en cours */ .current{ position: relative; color:#000; } .current::after{ content:' '; display: block; width:50%; height:6px; border-top:1px solid #EA5046; border-bottom:1px solid #EA5046; bottom:-12px; transform: translate(50%,0) rotate(-15deg); opacity: 1; position: absolute; } /* couleur des liens */ nav{ color:#EA5046; } /* suppression du soulignement */ nav a{ text-decoration: none; } /* icône burger */ nav.mobile{ display:block; font-size: 24px; line-height: 1; } nav.mobile a{ padding:7px 14px; height:48px; background:#EA5046; color:#fff; display: block; } /* masque ou montre selon l’écran */ @media (min-width:896px){ nav.mobile{ display:none; } } nav.no-mobile{ display:none; } @media (min-width:896px){ nav.no-mobile{ display:block; } }
Finitions du footer :
.footer{ background: #fff; display:grid; grid-gap: 24px; gap:24px; grid-template-columns: 1fr; justify-content: center; padding:0 24px; } .footer a{ display:block; padding:12px 0; border-bottom:1px solid #eee; } .footer .current{ color:#000; font-weight: 700; } .footer .current::after{ display: none; } @media (min-width:640px){ .footer{ grid-template-columns: repeat(auto-fill, 400px); } } @media (min-width:896px){ .footer{ display:none; } }
Version avec des liens…
En mixant avec un précédent article et en modifiant le HTML/CSS, la grille reste en place et aucun élément n’interfère.