The task and original case
Hand off a responsive layout with measurable acceptance conditions at 320,390 and 1280 pixels. The supplied fixture records sixteen pixels of unintended overflow at 320. Your task is to document that failure, propose a correction and collect actual evidence before calling the layout accepted.
| Case element | Value or requirement |
|---|---|
| Inputs | Review widths 320,390,1280px; a fictional narrow layout overflows by 16px. |
| Build | A design handoff with breakpoint behavior, screenshots and unresolved states. |
This is an original invented exercise. It is independent practice, with no employer assessment or open-vacancy claim. Download the inputs, attempt your own result, then open the separate answer key.
Data and worked inputs
Build a result another person can follow
Record viewport width, document scroll width, component behavior and a screenshot for each reviewed state. For the invented 320px case, the reported scroll width is 336px, creating 16px of overflow. The 390 and 1280 fixture states record zero overflow. These supplied values are a failing exercise fixture, not measurements of a real site you have inspected.
Trace the responsible element, such as a fixed-width panel, unbreakable string or table. W3C's page-structure guidance supports meaningful structure; it is not a substitute for measuring responsive behavior. Write the intended layout at each width and any deliberately scrollable region. Repair the cause without hiding content with a broad overflow clipping rule.
Sources[1]
Check the worked result
The initial acceptance state is failed because 320px has unintended horizontal overflow. After your implementation, measure each specified width again. A zero value at 390 cannot establish success at 320, and a changed screenshot alone cannot prove that hidden content is reachable.
Final acceptance requires zero unintended horizontal overflow at all three widths, readable content, reachable controls and preserved meaningful order in the reviewed states. Keep any intended internal table scrolling distinct from unintended page overflow.
Make the failure visible
Test a long label, an error message and a focus outline as separate states. A layout that fits short placeholder text may fail with real content. Check keyboard access to controls near edges, and verify that the correction did not merely clip the overflowing part. Record an unresolved state honestly instead of marking the entire handoff complete.
Revise it and ask someone to reproduce it
Give a peer the widths, content fixtures and acceptance conditions, then ask them to reproduce the checks. Update the handoff with actual measurements, screenshot names and remaining issues. In revision two, revisit the same states after another content change; responsive acceptance belongs to a specific reviewed version, not a permanent promise.
- The 16px fixture failure is labelled as an invented observation.
- Actual revised evidence covers 320,390 and 1280px independently.
- Readable content and reachable controls survive the overflow correction.
Describe the work accurately
After completing your own version, you could adapt this project bullet: “Prepared an independent responsive handoff with explicit viewport tests, overflow evidence, state coverage and reproducible acceptance conditions.”
Use Projects or Independent practice as the heading. Keep the input files, result and revision together. Describe only your own completed work; the invented numbers are model outputs, not employer results or measured business impact.