LESSON 03 OF 03 · WRITTEN GUIDE
Make the layout responsive
Responsive design is a change in composition, not simply a shrunken desktop page. Let content determine the breakpoint. A two-column area may need to become one column long before a specific device size. Keep the primary task visible and controls easy to use.
Make it practical
Inspect the page at narrow, medium, and wide sizes. Increase text size to 200 percent. Check long labels, validation messages, and the navigation. Replace fixed widths where they prevent the layout from adapting.
TRY THIS PROMPT
Review this CSS for fixed dimensions that could cause overflow. Suggest the smallest changes to keep the reading-list form and its messages usable on narrow screens and at enlarged text sizes. Preserve the visual hierarchy.
Check your work
Is there unintended horizontal scrolling? Can you read every message and reach every control? Does the content remain in a meaningful order?
Use the output as a draft. Compare it with the brief, inspect the work, and keep the decisions you can explain.