HTML & CSS · Responsive Design · Lesson 19 of 25

Mobile-First Design

Concept

Mobile-First Design

Writing base styles for small screens first, then adding complexity with min-width media queries, keeps mobile experiences fast and simple.

This approach also matches how most real traffic works today, since more visits to most sites come from phones than from desktops.

By the end of this lesson

Explain the core idea behind Mobile-First Design.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

Syntax

.selector {
  /* mobile styles here, unwrapped */
}
@media (min-width: 900px) {
  .selector {
    /* enhancements for larger screens */
  }
}

ExampleRunnable

.card {
  padding: 12px;
}
@media (min-width: 900px) {
  .card {
    padding: 24px;
  }
}

Try it Yourself »

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in Mobile-First Design. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Rewrite a component's CSS mobile-first, starting with the smallest screen.

Loading editor…

Console

Output will appear here...