Skip to main content

CSS Media Queries — exercises and bug fixes

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

    Write your first media query

    easy10 min

    Below 600px, make #text 14px.

  2. 2

    Override a base rule

    easy10 min

    #text is 30px by default; shrink it to 14px below 600px.

  3. 3

    Target a media type

    easy10 min

    On screens narrower than 600px, make #text red.

  4. 4

    Use range syntax

    easy10 min

    Using the modern range form, make #text blue at 600px and below.

  5. 5

    Query the orientation

    medium10 min

    In portrait, make #text green.

Find the bug(5)

  1. 1

    Fix the rule leaking to phones

    easy8 min

    The 30px desktop size should only apply from 700px up, leaving phones at the default 16px.

  2. 2

    Fix the inverted breakpoint

    easy8 min

    min-width targets wide screens; this rule is meant for narrow ones.

  3. 3

    Fix the breakpoint with no unit

    easy8 min

    A breakpoint needs a unit, or the whole query is invalid.

  4. 4

    Fix the missing at-sign

    easy8 min

    The rule is @media.

  5. 5

    Fix the missing and

    easy8 min

    A media type and a feature must be joined with `and`.

Ready to write the code?

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

Open the workspace