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.
Below 600px, make #text 14px.
#text is 30px by default; shrink it to 14px below 600px.
On screens narrower than 600px, make #text red.
Using the modern range form, make #text blue at 600px and below.
In portrait, make #text green.
The 30px desktop size should only apply from 700px up, leaving phones at the default 16px.
min-width targets wide screens; this rule is meant for narrow ones.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceA breakpoint needs a unit, or the whole query is invalid.
The rule is @media.
A media type and a feature must be joined with `and`.