Media Query Breakpoints

Background

Media queries enable responsive design that adapts to different screen sizes.

Problem

Create a responsive layout with mobile-first media queries at common breakpoints.

Input

CSS for different screen sizes

Output

Responsive layout

Sample tests

Input: mobile-first CSS

Expected: adapts to viewport

Your solution

Learning objective

Learn responsive design and mobile-first methodology