Skip to main content

Container Queries — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Container Queries 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

    Make an element a container

    easy10 min

    Let #wrap be queried on its inline size.

  2. 2

    Query the container

    easy10 min

    When #wrap is 500px or narrower, make #text purple.

  3. 3

    Name a container

    easy10 min

    Name #wrap "card" and query it by that name.

  4. 4

    Use the container shorthand

    easy10 min

    Set the name and type together with the container shorthand.

  5. 5

    Restyle a component by its box

    medium10 min

    In a narrow card, stack #box and shrink #text.

Find the bug(5)

  1. 1

    Fix the missing container-type

    easy8 min

    Nothing can be queried until the element opts in.

  2. 2

    Fix the container that opted out

    easy8 min

    The default `normal` is not a queryable container.

  3. 3

    Fix the name mismatch

    easy8 min

    The query names a container that does not exist.

  4. 4

    Fix the shorthand separator

    easy8 min

    The container shorthand separates name and type with a slash.

  5. 5

    Fix the element querying itself

    easy8 min

    A container cannot be styled by its own query — put the type on the parent.

Ready to write the code?

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

Open the workspace