What is mobile-first design?

The short answer

Mobile-first design means writing your base CSS for mobile screens and then using min-width media queries to add styles for larger screens. This is the opposite of desktop-first (where you write for desktop and use max-width to adapt for mobile). Mobile-first is the recommended approach because it leads to simpler CSS and better performance on mobile devices.

Mobile-first vs desktop-first

Mobile-first (recommended):

Copy
/* Base styles — for mobile */
.container {
  padding: 16px;
}
.grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Tablet and up */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
  }
}
/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Desktop-first:

Copy
/* Base styles — for desktop */
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.grid {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
/* Tablet */
@media (max-width: 1023px) {
  .container {
    max-width: none;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .grid {
    flex-direction: column;
  }
}

Why mobile-first is better

1. Less CSS to override — Mobile layouts are simpler (single column, stacked content). You start simple and add complexity for larger screens rather than writing complex styles and then undoing them for mobile.

2. Better performance on mobile — Mobile devices download less CSS because the base styles are minimal. Desktop styles are only loaded when needed.

3. Forces you to prioritize content — When you design for mobile first, you have to decide what is most important because screen space is limited.

4. min-width is additive — You are adding features as the screen gets bigger, which is more natural than removing features as it gets smaller.

Common breakpoints

Copy
/* Mobile: 0 - 767px (base styles, no media query) */
/* Tablet */
@media (min-width: 768px) {
}
/* Desktop */
@media (min-width: 1024px) {
}
/* Large desktop */
@media (min-width: 1440px) {
}

Why interviewers ask this

This tests your approach to responsive design. Interviewers want to see if you design mobile-first (the industry standard) and if you understand why it leads to better code and performance.