Skip to main content

Responsive Layout — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Responsive Layout lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Never overflow the screen

    easy10 min

    Stop .cell growing wider than its container.

  2. 2

    Size against the viewport

    easy10 min

    Make #grid half the viewport width.

  3. 3

    Cap a fluid width

    easy10 min

    Make #grid fluid but never wider than 300px.

  4. 4

    Let the items wrap

    easy10 min

    Lay #grid out as a wrapping flex row.

  5. 5

    Scale the text fluidly

    medium10 min

    Give .cell a font-size clamped between 14px and 24px, scaling at 2vw.

Find the bug(5)

  1. 1

    Fix the fixed width that overflows

    easy8 min

    A hard width cannot shrink; cap it instead.

  2. 2

    Fix the desktop grid leaking to phones

    easy8 min

    Three columns should only appear from 700px up.

  3. 3

    Fix the percentage read as a viewport unit

    easy8 min

    50vw is half the viewport, not half the parent.

  4. 4

    Fix min and max swapped

    easy8 min

    Capping a fluid width uses min(), which picks the smaller value.

  5. 5

    Fix the row that will not wrap

    easy8 min

    Without wrapping, the items are squeezed instead of flowing onto new lines.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace