Mobile-First Design
What is Mobile-First Design?
Imagine designing a product box. It is much easier to start by fitting all the essential items inside a tiny matchbox, and then adding extra space and features as you scale up to a shoebox or shipping crate. If you start with a shipping crate, shrinking it down to a matchbox requires throwing away features in confusion.In CSS, Mobile-First Design is a design strategy where you write CSS styles for mobile screens (the smallest viewport) as your default, base styles. You then add media queries using min-width to layer on layout changes and enhancements as the screen width increases.
Why does it matter?
Mobile-first design matches the usage patterns of the modern web, where more than half of all traffic comes from mobile phones. It keeps your base styles simple, lightweight, and clean, preventing desktop styles from cluttering mobile rendering calculations.Syntax Breakdown
/* Default base styles (Mobile) */
.sidebar {
display: none;
}
/* Enhancement styles (Tablet / Desktop) */
@media (min-width: 768px) {
.sidebar {
display: block;
}
}
Common Mistakes
max-width queries, you are writing desktop styles as your default base and then trying to override or undo them for mobile. This is desktop-first, not mobile-first, and leads to bloated, hard-to-maintain CSS!Quick Reference
Mobile base — Default stylesheet declarations without queries.min-width — The query operator used to layer desktop enhancements.Your Task
Create a media query targeting screen widths of `min-width: 768px` and set the `.sidebar` display property inside it to `block`.
index.html
Type code above to start the lesson.
Live Preview