Making it work on a phone
Design for the small screen first, add media queries only where something breaks, let text and spacing scale themselves, and let a component respond to its own width.
By the end you can
- Start from the phone and add to it, instead of cutting things away
- Write a media query, and know when you do not need one
- Let sizes scale smoothly between screens with clamp
- Make a component respond to its own space, not the whole window
Easier if you did first
step 1 of 4
Start with the phone
Most of your visitors are on a phone. In Ghana it is the large majority. So the phone is not the hard case to handle at the end: it is the normal case to start from.
A media query is a rule that only applies at certain screen sizes. @media (min-width: 700px) means: from 700 pixels wide and up.
You can write them the other way, max-width, meaning up to a size. Mixing both in one project is where people get confused about which rule is winning.
Pick min-width and stay with it. Then your plain CSS is the phone design, and each media query only adds what a bigger screen can afford: more columns, more space, a bigger heading. This is called mobile first, and the reason it works is that adding is easier to reason about than taking away.
The numbers you choose are called breakpoints, and the good ones come from your own design, not from a list of device sizes. Make the window narrow, watch until something looks wrong, and put a breakpoint there.
On the right, the cards stack, which is correct on a phone. Add one media query that puts them in a row on wider screens.
.plans {
display: grid;
gap: 16px; phone: one column, stacked
}
@media (min-width: 700px) {
.plans {
grid-template-columns: repeat(3, 1fr); wider: three across
}
}What these words mean
- media query
- A block of CSS that applies only at certain screen sizes.
- min-width
- From this width and up. The mobile-first direction.
- max-width
- Up to this width. Useful, but do not mix both habits.
- breakpoint
- The width where you change the layout. Chosen from your design, not from a device.
- mobile first
- Write the phone layout as your plain CSS, then add for bigger screens.
Easy to get wrong
Designing for a laptop, then writing max-width queries to undo it
Phone layout first, min-width queries to add
Undoing is harder than adding: you end up resetting properties you set three rules earlier, and the phone, which is most of your traffic, gets the heaviest and most patched-up version.
Breakpoints at 320, 375, 414, 768, 1024 for named devices
A breakpoint where your layout actually breaks
New devices appear constantly and none of them match the list. Narrow your own window until the design looks wrong, and put the breakpoint there.
What we check
- There is a min-width media query
- It changes the columns on wider screens
- You stayed with min-width