Breakpoints are pixel thresholds in your CSS where the layout shifts to accommodate different screen sizes. At 767px, you might stack a three-column grid into one column. At 1024px, you might expand a collapsed mobile menu into a horizontal nav. They're the backbone of mobile-first design. The old standard was three breakpoints: mobile (under 768px), tablet (768–1024px), and desktop (1024px+). That's dated. Modern sites use five to seven breakpoints because devices fragment more. Tailwind CSS ships with 640px, 768px, 1024px, 1280px, and 1536px. Bootstrap uses similar ranges. We pick breakpoints based on actual traffic data from Google Analytics, not arbitrary device categories. Most traffic to Ottawa SEO client sites comes from 375px iPhones, 393px Android phones, 1920px desktops, and 1440px laptops. We always test those four widths plus edge cases like 280px (accessibility minimum) and ultra-wide monitors at 2560px. If your design breaks between standard breakpoints, add a custom one, but don't go past eight total or maintenance becomes hell. Two approaches: device-based breakpoints (targeting specific phones or tablets) versus content-based breakpoints (adding breaks only where your design actually breaks). Content-based is cleaner long-term. If your three-column card grid looks fine at 800px but collapses awkwardly at 750px, put the breakpoint at 750px, not at some theoretical tablet width. Common mistake: designing desktop-first and cramming mobile into min-width queries. Always write mobile CSS first, then use min-width media queries to expand for larger screens. It's faster to render and forces you to prioritize content. Another mistake: pixel-perfect breakpoints like 1366px to target one laptop model. Screens change every year; your breakpoints shouldn't. We audit breakpoints during every redesign by resizing the browser slowly from 280px to 2560px and watching for layout bugs. If something looks broken at an in-between size, that's where a new breakpoint goes. Test on real devices when possible, especially older iPhones and cheap Androids that still make up 30–40% of Canadian mobile traffic.