Vérifier le comportement à différentes largeurs

Une page peut sembler correcte sur votre écran habituel et pourtant déborder sur un téléphone ou laisser de grands espaces inutilisés sur un écran large. Les changements liés à un conteneur ajoutent un autre point de contrôle : un composant peut changer de présentation selon l’espace qui lui est réellement disponible.

Vous allez vérifier la page complète de l’atelier à trois largeurs de fenêtre, repérer les changements attendus et corriger un débordement uniquement s’il est confirmé. Vous poursuivez avec index.html et style.css déjà assemblés dans les leçons précédentes ; conservez leur HTML et leurs classes autorisées.

Préparer trois mesures reproductibles

Ouvrez la page dans les outils de développement du navigateur et activez le mode d’affichage adaptatif. Pour comparer les mêmes conditions, utilisez des fenêtres de 360 px, 768 px et 1280 px de large, en gardant le zoom à 100 %. Ces valeurs servent de points de contrôle, pas de seuils obligatoires pour la mise en page.

1. À 360 px, contrôlez que le titre, les horaires, les conseils et le contact tiennent dans la fenêtre sans défilement horizontal.
2. À 768 px, vérifiez que les zones restent distinctes et que les espacements ne créent ni chevauchement ni colonne trop étroite.
3. À 1280 px, contrôlez la largeur maximale du contenu, l’équilibre des colonnes et l’absence de lignes de texte excessivement longues.

À chaque largeur, faites défiler la page et observez aussi le texte le plus long, notamment l’adresse de contact. Inspectez le document entier et le composant concerné : le défilement horizontal peut provenir d’une largeur minimale, d’un contenu non sécable ou d’un espacement, et pas nécessairement de la mise en page principale.

Contrôler les changements liés au conteneur

Dans la leçon consacrée aux requêtes de conteneur, vous avez défini un conteneur nommé pour les conseils et une présentation qui évolue selon sa largeur. Vérifiez la règle @container existante dans style.css, puis observez les conseils quand leur conteneur est étroit et quand il devient plus large. Le déclenchement dépend de la largeur de ce conteneur, qui peut différer de celle de la fenêtre.

Pour chaque point de contrôle, notez si la liste adopte la présentation prévue et si les éléments restent lisibles. Si l’état ne change pas entre 360 px et 1280 px, inspectez la largeur réelle du conteneur et le seuil de la requête ; ne modifiez pas le seuil avant d’avoir confirmé que le conteneur reçoit effectivement l’espace attendu.

Diagnostiquer et corriger un dépassement

Si vous constatez un dépassement, sélectionnez l’élément suspect dans l’inspecteur et comparez sa largeur calculée avec celle de son parent. Examinez les déclarations actives, notamment width, min-width, les espacements et le comportement de retour à la ligne du contenu. Désactivez temporairement une déclaration dans l’inspecteur pour confirmer son rôle avant de toucher au fichier.

Corrigez ensuite la règle responsable dans la section qui la possède déjà, sans ajouter de classe ni de variable hors contrat. Par exemple, si le dépassement vient d’une valeur de largeur fixe sur la liste de conseils, remplacez cette contrainte par une largeur fluide adaptée à son parent, puis contrôlez que la règle du conteneur continue de produire ses deux présentations. N’ajoutez pas cet exemple au fichier si aucune largeur fixe de ce type n’existe dans votre état actuel.

À retenir

• Testez trois largeurs représentatives : 360 px, 768 px et 1280 px.
• Vérifiez les changements de présentation en fonction de la largeur réelle du conteneur, pas seulement de la fenêtre.
• Identifiez l’élément et la déclaration responsables avant de corriger un débordement.
• Répétez les trois contrôles après chaque ajustement pour éviter une régression.

À la leçon suivante, vous réaliserez la passe finale de nettoyage et validerez la livraison CSS.