Published lesson · 30 minutes

Responsive design for small screens

Objective: Use flexible measurements and a content-driven media query to keep a page usable on narrow screens.

Understand the idea

Responsive design for small screens works best when the learner can explain the reason behind each step, not just copy a result. Responsive CSS starts with content that can flow; media queries add a change only when a layout no longer fits comfortably.

A community timetable has a wide three-column layout on a laptop but needs stacked session details on a phone. Treat the names and details as invented practice information; the example is for learning a method and does not describe a live service.

A dependable sequence is: Start with a single-column layout, add flexible widths, then introduce a breakpoint where the timetable can gain columns without shrinking text. Write down the important decision before you begin so another person can follow the reasoning.

Check at a narrow viewport and at 200% zoom. Buttons must remain reachable, text must not overlap and reading order must remain clear. Compare the result with the objective, then change one thing at a time if the first attempt does not work.

Choose one breakpoint from the content needs and document what changes at that width. Explain one assumption that would need checking before anyone used a similar result outside the classroom.

Keep a short record of the choices you made and the evidence you used to check them. A useful practice result is understandable by another learner, stays within the stated scope and makes its limitations visible before anyone relies on it.

Worked examples

Responsive design for small screens: practice example

Explore how responsive design for small screens supports the lesson objective with a small synthetic example.

styles.css

.schedule { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 42rem) { .schedule { grid-template-columns: repeat(3, 1fr); } }

Practice tasks

  1. Explore responsive design for small screens

    Use the worked example for “Responsive design for small screens”. Change one small detail to suit a different synthetic community situation, then explain what you expected and how you checked whether the change still met the lesson objective.

  2. Build a CSS practice example

    Create a small practice result that demonstrates this objective: Use flexible measurements and a content-driven media query to keep a page usable on narrow screens. Use only synthetic information, keep the first version focused, and write down one limitation that a later version should address.

  3. Review and explain the result

    Review your “Responsive design for small screens” result as if another learner will use it without your explanation. Identify one strength, one exact point that may be unclear, and a revision that would make the result easier to understand or use.

Responsive design for small screens becomes easier when you start with a single-column layout, check the result and explain the choice to another learner.

Course overview