Breakpoint
A screen width at which the layout switches to a different arrangement, like going from three columns to one.
What it is
A breakpoint is a specific width, measured in pixels, where a responsive layout changes. Below 768px the menu becomes a hamburger; above 1100px the sidebar appears.
Most apps use two to four: phone, tablet, laptop, and sometimes wide desktop. Common values are around 640, 768, 1024, and 1280 pixels, but the right ones depend on your content.
Naming breakpoints in your prompt removes guesswork: "below 768px, stack the columns" is precise in a way "on small screens" isn't.
How to ask for it
“On smaller screens the table gets squished. Fix it.”
“Below a 768px breakpoint, replace the orders table with a stacked list of cards showing order number, customer, and total. Above 768px keep the full table.”
"Smaller screens" is fuzzy; a breakpoint gives the exact width where behavior changes and what changes.
You've seen this in
- AResizing a browser window on almost any modern site
- SStripe's docs collapsing their sidebar
- TTwitter switching from three columns to one