Mobile-First CSS — Writing Styles for Small Screens First

Mobile-first is not a constraint — it is a workflow. Instead of building a full desktop layout and then using CSS to override it for small screens, you write the smallest, simplest version of each component first, then add complexity with min-width media queries as the screen grows. The result is a stylesheet that is easier to read, maintains better cascade order, and aligns with how modern CSS frameworks are written.

Desktop-first vs mobile-first

Desktop-first starts with the full layout and uses max-width media queries to simplify it for small screens:

/* Desktop layout — default */
.tours-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.tour-card {
  flex: 1 1 300px; /* multi-column by default */
}

/* Override for mobile */
@media (max-width: 767px) {
  .tour-card {
    flex: 1 1 100%; /* force single column on mobile */
  }
}

Mobile-first starts with the single-column layout and adds the multi-column version at wider breakpoints:

/* Mobile layout — default (no media query) */
.tours-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tablet and above */
@media (min-width: 768px) {
  .tours-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tour-card {
    flex: 1 1 280px;
  }
}

Both produce visually identical results. Mobile-first is better for three reasons:

Cleaner cascade — base styles are simple; min-width blocks layer on enhancements. You’re adding, not overriding.
Smaller default stylesheet — mobile devices download fewer CSS rules before the first render.
Industry standard — Bootstrap, Tailwind, and most CSS frameworks use min-width. Reading their source code will be familiar.

Why min-width cascades better than max-width

With max-width (desktop-first), you write complex rules first, then override them. Every mobile fix is an override of something that was already declared. Overrides accumulate and can conflict:

/* Desktop-first — overrides compound */
.site-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 3rem;
  background: #2c4a1e;
}

@media (max-width: 767px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }
}

With min-width (mobile-first), the base is minimal and each media query adds what is needed at that width. There is less to override because you started simple:

/* Mobile-first — additive */
.site-header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #2c4a1e;
}

@media (min-width: 768px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 3rem;
  }
}

The mobile-first stylesheet structure

The pattern:

/* ===========================
   BASE STYLES (mobile first)
   =========================== */

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
}

.site-header { /* mobile styles */ }
.site-nav    { /* mobile styles */ }
.hero        { /* mobile styles */ }
.tours-grid  { /* mobile styles */ }
.tour-card   { /* mobile styles */ }

/* ===========================
   TABLET — 768px and above
   =========================== */

@media (min-width: 768px) {
  .site-header { /* tablet enhancements */ }
  .site-nav    { /* tablet enhancements */ }
  .tours-grid  { /* tablet enhancements */ }
}

/* ===========================
   DESKTOP — 1024px and above
   =========================== */

@media (min-width: 1024px) {
  .tours-grid  { /* desktop enhancements */ }
  .hero        { /* desktop enhancements */ }
}

STO breakpoint strategy

For the Summit Trail Outfitters site, two breakpoints cover the device range:

768px — switches from mobile (single-column, stacked nav) to tablet (multi-column, horizontal nav)
1024px — further refines the desktop layout (wider cards, larger type scale)

You do not need a breakpoint for every device size — only where the layout needs to change.

Content decisions on mobile

Mobile-first asks you to think about what is essential at the smallest size:

Navigation — on mobile, the full horizontal nav bar may not fit. The mobile default can stack links in a column; the tablet breakpoint restores the row.
Cards — one card per row on mobile (full-width), two or three on larger screens.
Font sizes — base sizes work on mobile; you may scale headings up at wider breakpoints.
Spacing — tighter padding on mobile (2rem), more generous on desktop (4rem).
Images — always max-width: 100%; height: auto so they scale within their container.

Progressive enhancement

Mobile-first CSS is an application of progressive enhancement — start with what works everywhere, then layer on improvements as capabilities and space allow. The mobile version is not a degraded experience; it is the complete, functional baseline. The tablet and desktop versions are enhancements on top of that baseline.

The analogy: mobile-first CSS is like packing for a backpacking trip before a road trip. Start with only what fits in the daypack — essentials, nothing extra. Then, when you have the car, add what the extra space allows. You would not pack the car first and then try to decide what to leave behind when switching to the pack.

Exercise

Restructure the STO stylesheet to be mobile-first:

In style.css, set the default nav to a column layout:

/* Mobile base */
.site-header {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #2c4a1e;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

Add a tablet breakpoint that restores the horizontal layout:

@media (min-width: 768px) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
  }

  .site-nav {
    flex-direction: row;
    gap: 2rem;
  }
}

Open DevTools at 375px. The nav should be stacked vertically. Widen to 900px — the nav should switch to a horizontal row.
Confirm that the mobile view is functional and readable — not a broken desktop view, but a deliberately simple one-column layout.

Recap

Mobile-first means writing the smallest, simplest version of each component as the default, then using min-width media queries to add complexity at wider breakpoints.
min-width (mobile-first) adds enhancements upward. max-width (desktop-first) applies overrides downward — which compounds and is harder to maintain.
The mobile-first stylesheet structure: base styles (no query) → @media (min-width: 768px) → @media (min-width: 1024px).
Content decisions on mobile: single-column layouts, stacked navigation, max-width: 100% on images, slightly tighter spacing.

Lesson 06 brings Flexbox and media queries together into the complete responsive STO layout — navigation, card grid, and hero — all working from mobile to desktop.