Lesson 5 of 30
Mobile-first isn't 'design for phones first because phones are popular.' It's a constraint discipline: start from the least space and least capability, then add — because a layout that only works with room to spare has no plan for when the room runs out.
12 min read
Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.
Question 1 of 3
A header row squeezes a label, a counter, and a toggle onto one line at every width, causing the label to wrap into three cramped lines on a narrow phone. What's the mobile-first fix?
Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.
Sign up freeWhat interviewers actually ask about this, and what a strong answer has to cover.
A strong answer covers
Likely follow-ups
"Responsive" gets treated as a technical checkbox — media queries exist, therefore the site is responsive — but the actual discipline is a reasoning order: design for the most constrained case first, then progressively add for more space, not the reverse. Starting from a wide desktop layout and shrinking it down tends to produce a page that technically fits on a phone but was never actually designed for one — content gets cramped, touch targets shrink, and priority order stays whatever made sense at 1280px.
Mobile-first flips the question. Instead of "how do I make this desktop layout survive on a phone," it's "what does this screen absolutely need at the smallest size, and what earns the right to be added as space becomes available?" Breakpoints stop being about specific devices (nobody should write @media (width: 393px) for a specific phone model) and become about content — the point where a layout's current arrangement genuinely stops working, whatever pixel width that happens to be.
This platform's own mock-interview header pairs a status label ("Interview in progress") with a question counter and a language toggle. At normal widths, all three sit comfortably on one row. Squeezed to a 300px viewport, forcing all three onto one line meant the label itself got compressed into an awkward three-line wrap — technically "fit," but unreadable.
/* Before: forced onto one row no matter what */
.header { display: flex; justify-content: space-between; }
/* After: wraps onto two rows once there's genuinely no room */
.header { display: flex; flex-wrap: wrap; justify-content: space-between; }
The fix wasn't a new breakpoint targeting "phones" — it was flex-wrap, a layout that degrades to two rows whenever content demands it, at any width, on any device. That's the mobile-first instinct: solve the constraint generally, not for one measured screen size.
min-width media queries on top for larger screens means a browser that doesn't understand a later query still gets a usable base layout — the reverse order (desktop base, max-width overrides) has no equivalent safety net."How would you make this component responsive?" tests whether a candidate reaches for breakpoints as the first tool or the last one. The stronger answer starts with "what should happen when there's no room" as a layout question — flex-wrap, minmax, clamp — and only adds an explicit breakpoint when the content itself genuinely needs to reorganize, not just resize.