A responsive breakpoint is a viewport width at which your CSS changes the layout — typically switching from a multi-column desktop view to a stacked mobile view, or adjusting font sizes and spacing for tablets. The common breakpoints: 640px (mobile), 768px (tablet), 1024px (small desktop), 1280px (desktop), 1536px (large desktop). But those are starting points, not gospel.
The biggest breakpoint mistake on landing pages: testing only on iPhone and MacBook. Your analytics likely show significant traffic from Samsung devices at 360px wide, from iPads at 810px (which falls between most tablet breakpoints), and from 1366px laptops that are technically "desktop" but have less horizontal space than your designer's monitor. Design for your actual traffic, not idealized device categories.
Breakpoint strategy for landing pages
Don't design for devices — design for your content. The right breakpoint is where your layout starts to look broken, not where a specific phone starts. If your three-column feature grid looks cramped at 900px, that's your breakpoint — regardless of whether a standard device hits that width. Content-driven breakpoints produce more robust layouts than device-driven ones.
For landing pages specifically, the mobile breakpoint is the critical one. Over 60% of web traffic is mobile, and for paid social campaigns it can be 80%+. Your mobile layout isn't a "responsive version" — for most of your visitors, it IS your landing page. Design mobile-first, then expand for desktop. Not the other way around. Audit your mobile version with the same rigor you give your desktop design.