Stop 09 · Mobile & Responsive DesignTopics · 5/8

Breakpoints & Adaptive Layouts

In short

At some width, your three-column layout stops fitting. A breakpoint is the width where you change the layout on purpose. Pick them based on your content, not on one famous phone.

Specific screen-width thresholds where a layout's structure changes (e.g. a sidebar collapses into a hamburger menu below 768px) — the technical mechanism behind responsive design.

The jaadu pushes a sofa into place in a room while a small folded desk stands nearby.

Think of it like this

Rearranging furniture by room size

In a small hostel room, the bed goes against the wall and the desk folds. In a bigger flat, you add a sofa and a dining table. Same furniture idea, new arrangement at each room size. Breakpoints are those rearrangement points.

Watch it happen

Widths where the layout changes

320

360

600

840

1200

1600

1/4Small phones. One column, bottom navigation, full-width buttons.

The big ideas

What you need to know

Content decides

Add a breakpoint where your design starts to look stretched or cramped, not just at famous device widths.

Change structure

Breakpoints are for real layout changes: columns, navigation style, side panels. Small tweaks can stay fluid.

Fluid between points

Between breakpoints, the layout should still stretch smoothly. Don't design only exact widths.

Cap the width

On very wide screens, limit text containers so reading lines stay comfortable.

See it in code

Walk through the code

css

1.layout { display: grid; grid-template-columns: 1fr; }2 3@media (min-width: 600px) {4  .layout { grid-template-columns: 80px 1fr; }5}6 7@media (min-width: 840px) {8  .layout { grid-template-columns: 240px 1fr 320px; }9}

1/3Default: one column for phones.

One column on phones, a narrow rail plus content on medium screens, and a full sidebar, content and detail panel on wide screens.

Save yourself the pain

Common mistakes

Oops

Choosing breakpoints from one popular phone's exact width.

Do this instead

Devices change every year. Test your layout across a range and break where it stops working.

Oops

Handing off only three static frames with no notes about in-between sizes.

Do this instead

Note what stretches and what stays fixed, so developers know how the layout behaves between frames.

Your mission

Find your breakpoints

~30 min

Quick check

What is the best reason to add a breakpoint?

Go deeper

1Define 3 breakpoints (mobile, tablet, desktop) for a practice layout and design each state.
2Learn common breakpoint values used across the industry as reasonable starting defaults.
3Practice designing the transition moment at a breakpoint, not just the two end states.