Corriger les derniers défauts et valider le résultat

Une page peut sembler correcte sur votre écran tout en présentant un lien qui déborde, une carte plus étroite que les autres ou un contact difficile à lire sur mobile. Avant de terminer l’atelier de jardinage, vous allez vérifier la mise en page de façon méthodique et corriger les défauts sans ajouter des règles au hasard. Le but est de valider le résultat, pas de multiplier les ajustements jusqu’à ce qu’il ait l’air acceptable dans une seule fenêtre.

Commencez par une liste de contrôle

Chargez la page dans le navigateur et parcourez-la du haut vers le bas. Vérifiez d’abord que l’en-tête, les horaires, les conseils et le bloc de contact apparaissent dans l’ordre attendu, sans zone manquante ni recouvrement. Contrôlez ensuite que les textes restent lisibles, que les cartes ont une présentation cohérente et que les liens sont accessibles sans devoir viser une zone minuscule.

• Les zones de contenu sont visibles et disposées dans un ordre logique.
• Les titres, les paragraphes et les liens ne se chevauchent pas et restent lisibles.
• Les cartes et le bloc de contact conservent des espacements réguliers.
• Aucune barre de défilement horizontale n’apparaît sans raison.
• La navigation et les contenus restent utilisables sur grand écran comme sur mobile.

Effectuez ce contrôle à au moins trois largeurs : une fenêtre large, une largeur intermédiaire et une largeur étroite comparable à celle d’un téléphone. Réduisez progressivement la fenêtre plutôt que de tester seulement deux tailles prédéfinies : vous verrez ainsi à quel moment une ligne de navigation ou une carte commence à manquer de place. Si vous avez déjà organisé les zones avec des noms de grille, référez-vous à la leçon « Placer les zones de la page » plutôt que de réapprendre cette syntaxe ici.

Diagnostiquez avant de modifier le CSS

Quand un défaut apparaît, décrivez-le précisément : par exemple, « le titre de la carte dépasse à 360 pixels » ou « la colonne des conseils est plus large que la fenêtre ». Ouvrez ensuite l’inspecteur du navigateur, sélectionnez l’élément concerné et vérifiez les règles calculées, ses dimensions et celles de son parent. Les overlays Flexbox et Grid permettent de voir les lignes, les colonnes et les espaces utilisés ; le mode appareil sert à contrôler les dimensions du viewport. Changez une cause à la fois, puis rechargez ou redimensionnez pour confirmer que le défaut a disparu.

Une correction doit viser l’élément responsable. Un titre qui contient une adresse ou une suite de caractères sans espaces peut nécessiter overflow-wrap: anywhere sur son composant. Une piste de grille qui déborde peut demander une largeur minimale nulle. Si toutes les cartes sont décalées, inspectez d’abord le conteneur commun plutôt que de corriger chaque carte séparément. Cette démarche garde les règles compréhensibles et évite les exceptions locales accumulées.

Appliquez une correction vérifiable

Voici deux corrections courantes à intégrer à votre feuille style.css si vous constatez ces défauts. Les noms de classes correspondent à des composants de la page : adaptez-les à vos sélecteurs existants au lieu de créer une deuxième feuille de styles. La première règle permet au contenu d’une carte dans une grille de rétrécir ; la seconde empêche un texte non sécable de pousser le bloc de contact au-delà de son espace.

.conseil,
.contact {
    min-width: 0;
}

.contact__adresse {
    overflow-wrap: anywhere;
}

Après chaque modification, répétez le test à la largeur où le défaut apparaissait, puis contrôlez aussi une largeur plus grande et une plus petite. Vérifiez que la correction ne crée pas un nouveau problème : une adresse peut maintenant tenir dans le bloc, mais produire des retours à la ligne difficiles à lire ; une carte peut ne plus déborder, mais devenir trop étroite. Ajustez alors le composant ou l’espace disponible, sans ajouter une media query pour chaque dimension rencontrée.

Validez le projet

Terminez par un dernier parcours complet aux trois largeurs retenues. Testez également les contenus réels : un nom de conseil plus long, une adresse complète et les horaires, qui occupent parfois plusieurs lignes. La validation est terminée lorsque les zones restent dans l’ordre prévu, que les textes ne provoquent pas de débordement et que la navigation demeure utilisable. Notez les dimensions testées et les défauts corrigés ; vous pourrez reprendre ce même contrôle si le contenu ou les styles changent.

À retenir

• Vérifiez l’ordre, l’alignement, la lisibilité et les débordements avant de valider la page.
• Testez la page à plusieurs largeurs, notamment lorsque la mise en page change.
• Décrivez le défaut, inspectez l’élément et son parent, puis modifiez une cause à la fois.
• Confirmez qu’une correction ciblée ne crée pas de défaut ailleurs.
• Conservez une liste de contrôle pour rendre les vérifications reproductibles.