Module 16: Responsive Websites
Breakpoints
🏠The everyday picture
A curtain that's adjusted where the window needs it, not at fixed marks on the rail. You add an adjustment where the view starts to look wrong.
📘What it really is
- A breakpoint is a width where the layout changes, set by a media query.
-
Choose breakpoints where your content breaks, not by the names of devices: widen the window slowly, and when something looks wrong, that's a breakpoint. There are too many devices to design for each one.
-
Common starting points, if you need them: around 600px (large phones), 900px (tablets and small laptops) and 1200px (desktops).
-
Two or three breakpoints are enough for most sites.
- Use the same breakpoints throughout the stylesheet for consistency.
- Remember Module 15: Grid with
auto-fitand Flexbox withwrapadapt without any breakpoints at all. Use those first, and media queries for what they can't handle.
🖱️Try it
In developer tools' device mode, choose Responsive and drag the width slowly from 320px to 1400px. Write down every width where something looks wrong, and fix each with a media query or a more flexible rule.
✅Quick check
Should you set breakpoints for every popular phone model?
Show the answer
No. Set them where your content starts to look wrong; there are far too many devices.
Your card grid uses repeat(auto-fit, minmax(220px, 1fr)). Does it need a breakpoint?
Show the answer
Usually not: it changes the number of columns by itself.