Beginner level · Module 2: CSS and Responsive Layout · Lesson 3 of 3
Responsive, Mobile-First Design
Design for small screens first, then add media queries for larger screens, and make images and text adapt.
In this lesson you will
- Apply a mobile-first approach with min-width media queries
- Make images and typography responsive
Key concepts
mobile-firstmedia queriesresponsive imagesrelative units (rem, %)
The lesson
Mobile-first means writing the base styles for small screens and adding @media (min-width: 48rem) { … } rules for larger ones. Phones get simple, fast styles, and larger screens add layout.
Use relative units: rem for font sizes and spacing, percentages and fr for widths. Images should never overflow: img { max-width: 100%; height: auto; }. The srcset attribute lets browsers choose a smaller image file on phones, saving data.
Test with DevTools device mode at 320, 375, 768 and 1280 pixels wide, and on a real phone. Check that text is readable without zooming and that buttons are large enough to tap.
Step by step
- Write base mobile styles for the whole page.
- Add a min-width media query for tablet and desktop layouts.
- Make images responsive with max-width and srcset.
- Test at four widths and on a phone.
Practice activity
Complete the mobile-first styling of the organisation site from the practical activity.
Expected result: The site works at every tested width with no horizontal scrolling and readable text.
Check your understanding
-
What does mobile-first mean in CSS?
Show answer
Base styles target small screens; media queries add styles for larger screens.
-
Why use srcset for images?
Show answer
So browsers can download smaller images on small screens, saving data and time.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.