Mobile-First CSS: Designing Small to Large

Lesson eleven taught you media queries using a desktop-first approach: write full styles as the default, then use max-width queries to simplify things down for smaller screens. That approach is common and works, but most professional teams today build the opposite way: mobile-first. This lesson explains why mobile-first has become the standard, and how to actually write it, now that you also understand specificity and the cascade from the previous lesson, since mobile-first leans on cascade order quite directly.

Writing Min Width Queries

In mobile-first CSS, your default, unwrapped styles represent the smallest, simplest version of the design, built for a narrow phone screen. You then use min-width media queries (not max-width) to progressively add complexity as the screen gets wider.

.card-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .card-row {
    flex-direction: row;
  }
}

@media (min-width: 1200px) {
  .card-row {
    gap: 24px;
  }
}

Read this top to bottom: by default (phone), cards stack vertically with a small gap. Once the viewport reaches at least 768px (tablet and up), they switch to a horizontal row. Once it reaches at least 1200px (larger desktop), the gap increases further. Each min-width query only adds or adjusts what's needed for that breakpoint; it never needs to "undo" something from a wider breakpoint the way a desktop-first max-width approach often ends up doing.

Why Mobile First Wins

The reasoning behind mobile-first isn't just stylistic preference, it reflects real priorities. Mobile traffic represents a huge, often majority, share of web visits today, and designing the constrained case first forces genuinely important questions early: what content actually matters most, what can be deprioritized or hidden on a small screen, and what absolutely must remain easy to tap and read. Starting from a spacious desktop design and only afterward figuring out what to cut for mobile tends to produce more awkward, bolted-on-feeling results, because cutting things down is harder than building up.

Hiding And Revealing Content

There's also a very concrete technical reason mobile-first tends to produce cleaner CSS: the natural flow of block elements, flexbox with flex-direction: column, and a single content column are already what small screens usually need by default, often requiring no media query at all for simple sections. You only add media query complexity for the cases that genuinely need to change at larger sizes, which usually means less CSS overall, not more.

.sidebar {
  display: none;
}

.main-content {
  padding: 16px;
}

@media (min-width: 900px) {
  .sidebar {
    display: block;
    width: 240px;
  }

  .page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
  }
}

Here, the sidebar is simply hidden by default (phones get a simpler, single-column experience without a sidebar competing for limited width), and the whole grid-based two-column layout only activates once there's genuinely enough room for it at 900px and above. This is a realistic, common mobile-first pattern: hide or simplify by default, reveal and restructure as space allows.

Viewport And Ordering Pitfalls

A genuinely important technical requirement for mobile-first to behave correctly on actual phones is, again, the viewport meta tag from lesson eleven. Without <meta name="viewport" content="width=device-width, initial-scale=1">, a real phone's browser may render your mobile-first default styles at an incorrect zoomed-out width, defeating the entire approach before your media queries even get a chance to run.

A common mistake when switching mindsets from desktop-first to mobile-first is accidentally mixing max-width and min-width queries together in the same project without a clear system, which quickly becomes confusing to reason about, since some rules "turn off" past a point and others "turn on" past a point. Pick one direction, generally min-width for mobile-first, as your project's primary approach, and stay consistent throughout the whole stylesheet.

Another subtlety worth knowing: because of the cascade rule from the previous lesson, where equal-specificity rules later in the file win, mobile-first media queries must be written in ascending order, smallest min-width first, largest last, in your actual CSS file. If you accidentally wrote the 1200px query before the 768px query in the file, and both targeted the same property, the one appearing later in the source would win regardless of your intended breakpoint logic, producing confusing results exactly at certain widths.

It's worth connecting this lesson back to flexbox and grid directly: because mobile-first default styles are usually simple, single-column flex or block layouts, you often find yourself writing fewer overrides overall compared to a desktop-first project, since the complex, multi-column grid or row-based flex layout only needs to be introduced once, inside a single wider min-width block, rather than being the default that then has to be unpicked piece by piece for every smaller screen.

Practical Tips And Exercise

Practical tip: when starting a new component, physically resize your browser down to a narrow phone width first and design it there before touching any media query at all. Only once the small-screen version feels solid should you widen the browser and decide, at natural breaking points, what should change next.

Worth trying right now: rebuild the page-layout example above for a site featuring Vikesh Singh's portfolio, starting with a stacked, sidebar-less phone layout as your default styles, then add a min-width: 900px query that introduces a sidebar and switches to a grid layout. Resize your browser slowly from narrow to wide and watch the layout evolve at the exact breakpoint you chose.