# Pages That Fit Any Screen

Pages That Fit Any Screen: Responsive Design and the Viewport, Media Queries and Breakpoints, Mobile First: Start Small, Then Add Room.

Updated: November 10, 2026

1. [Responsive Design and the Viewport](https://www.ask-codey.com/lessons/css-responsive-design-and-viewport) (Apprentice): A responsive page fits whatever screen it's on, and it starts with one line in the head, the viewport line, plus knowing what breaks on a phone and how to see it with device mode.
2. [Media Queries and Breakpoints](https://www.ask-codey.com/lessons/css-media-queries) (Journeyman): A media query applies CSS only when a condition is true, such as a screen at least 40rem wide, a dark theme or a mouse that can hover, and breakpoints go where your content needs them.
3. [Mobile First: Start Small, Then Add Room](https://www.ask-codey.com/lessons/css-mobile-first) (Journeyman): Mobile-first CSS writes the phone layout as the base styles and uses min-width media queries to add columns as the screen grows, which takes less CSS than shrinking a desktop layout down.

Source: https://www.ask-codey.com/courses/css-in-depth/topics/css-pages-that-fit-any-screen