For a long time, a website was designed first for a computer screen, and mobile came afterward, as a degraded version patched together as best as possible. Mobile first reverses that habit: the base CSS is written for the smallest screen, and every Media query added afterward enriches the layout as the screen grows.
The choice is not only about the order of writing. It changes the way a page is thought through in the first place, forcing a decision about what is truly essential before deciding what can be added on top.
Definition
Writing mobile first means placing outside any media query the CSS meant for the smallest screen, then using min-width media queries to add complexity as the available width grows: more columns, a horizontal navigation instead of a collapsed menu, more generous margins.
The older, reversed order: desktop first
The opposite approach, desktop first, writes the full CSS for a large screen and then removes complexity with max-width media queries as the screen shrinks. The table puts the two logics side by side.
| Desktop first | Mobile first |
|---|---|
| The base style targets the large screen | The base style targets the small screen |
Media queries use max-width | Media queries use min-width |
| Each media query removes complexity | Each media query adds it |
| Mobile inherits a style meant for something else | Mobile receives the style meant for it |
Concrete example
A grid of three cards starts as a single stacked column, the simplest layout to read on a narrow screen, then moves to two and then three columns as the width increases.
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 600px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}No line redefines the spacing or the single-column layout: those values are set once, in the base style, and stay valid everywhere no media query overrides them. Our HTML and CSS course builds this exact grid mobile first, column by column, up to the breakpoint that adds the third card.
The classic pitfall
The most common mistake is to write the CSS with the large screen in mind anyway, then stack min-width media queries that only undo what was just set. The result looks like mobile first in its syntax but keeps the desktop-first reasoning underneath, and loses the main benefit: deciding first what truly matters on the smallest screen.
min-width media query has to cancel a property instead of building on it, that is often a sign the base style was designed for the large screen after all. Start over from the simplest version, with no media query, and add only what is genuinely missing as the width grows.Why this approach ended up winning
Mobile traffic has overtaken desktop traffic on most sites, which makes designing for the minority first look absurd. Mobile first also pushes toward fluid CSS units and content that is genuinely prioritized, two habits that benefit the whole site rather than just its narrowest version: a poorly placed Breakpoint stands out immediately when the starting point is the bare essentials.
Frequently asked questions
No, it is an order for writing CSS, not an order for testing. The site still needs checking across every targeted size; mobile first only means the default style, the one written with no media query at all, matches the smallest screen.
No. An internal tool used only on a fixed workstation has no reason to start from mobile. The approach mostly pays off for a public site, where the share of mobile traffic justifies treating that case as the normal one rather than an exception.
min-width and max-width be mixed in the same project?Technically yes, but mixing the two logics inside the same components makes the CSS hard to follow: a property can then be touched by one media query that adds and another that removes, without it being obvious which one applies last.