Unit 3 · CSS: the look and the layout
Mobile first: min-width vs max-width
Mobile first means the phone layout is the default CSS, and @media (min-width: …) queries add columns as the screen gets wider. max-width queries do the reverse: they patch a desktop layout for small screens.
The mix-up
What people often think
“Design for desktop, then patch the phone with max-width.”
What the tutor says
Write the phone layout as the default, then add min-width queries for wider screens. Simple first, extras on top.
How it works
The phone layout is usually the simple one: a single column. Starting there keeps the base CSS small and gives larger screens the extras on top, instead of undoing desktop rules one by one for phones.
Most visitors to a small site arrive on a phone, so the default should be the version that works there.
An example
.cards { display: grid; gap: 16px; } /* phone: one column */
@media (min-width: 700px) {
.cards { grid-template-columns: 1fr 1fr 1fr; }
}Close cousins of this mix-up
The tutor watches for these in the same lesson.
“max-width and min-width do the same job.”
max-width patches a big layout for small screens. Mobile first flips it: the small layout is the default, and min-width adds to it as screens grow.
“Media queries are for shrinking a desktop layout.”
Write the phone layout first, then add a min-width query that adds the row on wider screens.
Practise it with a tutor watching
Responsive design
Make one page work from a phone to a wide screen, starting with the phone.
Free with an account. The first two units need no account.