A breakpoint, or media query, is the width at which a website’s design and layout adjust to fit screens of different sizes. When designing in Webflow, breakpoints for smaller devices inherit styles from the base (desktop) breakpoint by default.
Breakpoints are an essential part of responsive design. You want your site to look good, whether it’s on a tablet or a 50-inch computer monitor. Webflow’s built-in responsive breakpoints make it possible to have an attractive and functional site across all devices.
In the Designer, you can switch between breakpoints using the device icons in the top bar. While screen widths define the breakpoints — 768 pixels for a tablet, for example — the icons mirror the appearance of the screen size each represents.
Webflow’s four default breakpoints are desktop, tablet, mobile landscape, and mobile portrait. You can click and drag the edge of the canvas on any breakpoint to test viewport widths beyond the defaults. Webflow offers three additional larger breakpoints that you can add from the breakpoint dropdown in the top toolbar.
