CSS Mobile First

Mobile first is a design and coding approach where you write CSS for the smallest screen first, then add styles for larger screens as the viewport grows. It is the industry standard for building responsive websites today — and for good reason.

Why Mobile First?

DIAGRAM — Web traffic in 2025:

Mobile:  📱📱📱📱📱📱 ~60% of all web traffic
Desktop: 🖥🖥🖥🖥     ~37% of all web traffic
Tablet:  📟           ~3%

Most users visit on a phone.
Designing for desktop first and squeezing down to mobile
always produces worse mobile experiences.

Other reasons to go mobile first:

• Forces focus — small screens have no room for clutter. You keep only what matters.
• Better performance — mobile users download only the base CSS. Desktops download a bit more on top.
• Easier to expand — adding features as the screen grows is simpler than removing them.
• Google mobile-first indexing — Google primarily uses your mobile version for search rankings.

Desktop First vs Mobile First

DIAGRAM — The two approaches:

DESKTOP FIRST (old approach):
  Write styles for wide screens
  Then use max-width media queries to shrink for phones
  → You fight against large-screen defaults to make mobile work

MOBILE FIRST (modern approach):
  Write styles for small screens
  Then use min-width media queries to enhance for larger screens
  → You build progressively — each breakpoint adds, not removes

The Key Difference — min-width vs max-width

Desktop First Uses max-width

/* Desktop first — start with a 3-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Then undo it for phones */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
}

Mobile First Uses min-width

/* Mobile first — start with a single column */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* Then add columns for larger screens */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  }
}

DIAGRAM — Mobile first grid progression:

Phone (< 600px):    [  Card 1  ]
                    [  Card 2  ]
                    [  Card 3  ]

Tablet (≥ 600px):   [ Card 1 ] [ Card 2 ]
                    [ Card 3 ]

Desktop (≥ 1024px): [ Card 1 ] [ Card 2 ] [ Card 3 ]

Common Breakpoints

A Full Mobile First Example

/* ── BASE STYLES (Mobile — no media query needed) ── */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  padding: 16px;
}

nav {
  display: flex;
  flex-direction: column; /* stacked nav links on phone */
  gap: 8px;
}

.container {
  width: 100%;
}

h1 { font-size: 1.75rem; }

/* ── TABLET (≥ 768px) ── */
@media (min-width: 768px) {
  body {
    padding: 24px;
  }

  nav {
    flex-direction: row; /* horizontal nav on tablet */
    gap: 24px;
  }

  .container {
    max-width: 720px;
    margin: 0 auto;
  }

  h1 { font-size: 2.25rem; }
}

/* ── DESKTOP (≥ 1024px) ── */
@media (min-width: 1024px) {
  body {
    padding: 32px;
  }

  .container {
    max-width: 1100px;
  }

  h1 { font-size: 3rem; }
}

Navigation — Mobile First Pattern

DIAGRAM — Mobile nav → Desktop nav:

Mobile (phone):
  ┌──────────────────┐
  │ 🏠 Logo    [☰]  │  ← hamburger menu button
  └──────────────────┘

On click → nav opens:
  ┌──────────────────┐
  │ Home             │
  │ About            │
  │ Services         │
  │ Contact          │
  └──────────────────┘

Desktop (≥ 768px):
  ┌───────────────────────────────────────────┐
  │ 🏠 Logo    Home  About  Services  Contact │
  └───────────────────────────────────────────┘
  (hamburger button hidden, links always visible)

/* Mobile nav styles */
.nav-menu {
  display: none; /* hidden by default on mobile */
}

.nav-menu.open {
  display: flex;
  flex-direction: column;
}

.hamburger {
  display: block; /* show hamburger on mobile */
}

/* Desktop nav styles */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;        /* always visible on desktop */
    flex-direction: row;
    gap: 32px;
  }

  .hamburger {
    display: none;        /* hide hamburger on desktop */
  }
}

Typography — Fluid and Responsive

/* Mobile first font sizes */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
p  { font-size: 1rem; }

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2rem; }
}

Testing Mobile First Designs

• Open browser DevTools (F12) and click the phone/tablet icon to enable responsive mode.
• Drag the viewport width from narrow (320px) to wide (1440px) and watch your layout adapt.
• Test on a real phone if possible — DevTools emulation is close but not identical.
• Check that text is readable without zooming on a 375px-wide phone view.
• Verify that touch targets (buttons, links) are at least 44×44px.

The meta viewport Tag

This HTML tag is required for mobile-first CSS to work properly. Without it, mobile browsers render the page at full desktop width and scale it down — making everything tiny.

<meta name="viewport" content="width=device-width, initial-scale=1">

Put it in the <head> of every HTML page. It tells the browser to use the actual device width as the viewport width, and to start at 1:1 zoom.

Mobile first is not just a CSS technique — it is a design philosophy. Start with the essentials for the smallest screen, then progressively enhance the experience as more space becomes available.