E-Learning Platform
0 of 139 builtAlways freeSign in
← Web Foundation I← Mobile-First & Media Queries
2.07 · Lab

Mobile-First & Media Queries

Small screen first, always. Here's a stack that starts as a column and earns its row at 600px.

Exercise

Stack on phones, row out on wider screens

Checks itself — try as often as you like

Make the two-line summary below mobile-first:

  • .stack — display: flex; and flex-direction: column; (the small-screen default).
  • Add @media (min-width: 600px) { .stack { flex-direction: row; } } underneath, so wider screens lay the two lines out side by side instead.