Layout & Principles · Layout & Grids
Breakpoint
also known as responsive breakpoint
A breakpoint is a defined screen size where a design switches to a different layout, such as going from three columns to one on a phone. Breakpoints let a single site adapt across desktops, tablets, and phones. They are usually written in CSS media queries at common widths.
Don't confuse it with
A breakpoint is a specific trigger width; the viewport is the current visible screen size. Adaptive design uses a fixed set of breakpoints, while responsive design flows fluidly between them.
In the wild
At a 768px breakpoint the sidebar collapses into a hamburger menu.