A breakpoint is the screen width at which a website switches to a different layout. Below that width the page shows one arrangement, and above it the content reflows into another. It is how a single site can look right on a 360-pixel phone and a 1440-pixel monitor without two separate builds.
Think of pouring water into glasses of different sizes. The water is your content, and the breakpoint is the moment you decide a wider glass needs the layout poured differently. A three-column pricing table that works on a laptop would be unreadable squeezed onto a phone, so at a chosen width it collapses into a single stacked column. This is the core mechanic behind responsive design, and most teams set their breakpoints using a mobile-first approach, starting with the smallest screen and adding rules as the viewport grows.
In code, breakpoints live inside CSS media queries. Frameworks like Tailwind ship sensible defaults (sm, md, lg, xl) so you rarely write the raw query yourself. The trick is to pick breakpoints based on where your design actually starts to look cramped, not on a list of popular phone models. A common mistake is to copy the exact pixel widths of last year’s iPhone, then watch the layout fall apart the moment a new size ships or someone opens the site in a half-width window on a laptop. Pin the breakpoint to the content, and that whole problem disappears. Devices change every year. Your content does not.
At TopDevs we set breakpoints around the content rather than around device names, so a client’s site holds up on whatever screen a customer happens to use.
