← HTML & CSS learning pathHTML & CSS · Module 9 of 10
Responsive design
Make pages work on phones, tablets and desktops.
📖 Key ideas
- Add <meta name="viewport" content="width=device-width, initial-scale=1">.
- Mobile-first: write phone styles first, add larger screens with @media (min-width: ...).
- Use flexible units (%, rem, fr) and max-width on images.
- Test with browser device tools at 360-400px width.
- Avoid horizontal scrolling on phones.
💡 Real-life example: Responsive design is water: it takes the shape of any glass (screen) you pour it into.
Viewport metaTells phones to use device width
Media queryCSS that applies at certain screen sizes
Mobile-firstDesign for small screens first
max-width: 100%Keeps images inside their container