# Mobile First and Media Queries

Make one page fit every screen: tell the phone to use its real width, add media queries where the content needs more room, start from the smallest screen and build up, and serve pictures that fit.

Updated: November 10, 2026

## [Pages That Fit Any Screen](https://www.ask-codey.com/courses/css-in-depth/topics/css-pages-that-fit-any-screen)

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.

## [Responsive Images](https://www.ask-codey.com/courses/css-in-depth/topics/css-responsive-images-topic)

1. [Responsive Images: max-width, object-fit and srcset](https://www.ask-codey.com/lessons/css-responsive-images) (Journeyman): Make pictures fit any screen with max-width, aspect-ratio and object-fit in CSS, and send each screen a picture of the right size and crop with srcset, sizes, picture and lazy loading in the HTML.

## [Exercise: A Mobile-First Taco Truck Page](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-mobile-first-taco-truck)

1. [Exercise: A Mobile-First Taco Truck Page](https://www.ask-codey.com/lessons/exercise-css-mobile-first-taco-truck) (Journeyman): Style Sol Taco Truck's ready-made page mobile first, with a one-column phone layout, two min-width breakpoints in rem and a truck photo that fills its box, and let the tests check each part.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-mobile-first-and-media-queries