Webflow Responsive Design: Breakpoints and Mobile Layouts

The breakpoint bar sits above the canvas in the Webflow Designer. From left to right: 1920px (optional), 1440px (optional), 1280px (optional), Desktop (the base — ≥992px), Tablet (≤991px), Mobile Landscape (≤767px), Mobile Portrait (≤478px). Desktop is the anchor. Styles on Desktop cascade DOWN (to smaller) automatically. Optional large breakpoints (1440px, 1920px) cascade UP from Desktop using min-width media queries. Click each breakpoint pill to switch the canvas view. When you make a style change, an orange dot indicator appears on that breakpoint to show it has local overrides. A blue indicator means the style inherited from another breakpoint. You only need to add styles where the inherited Desktop style needs to change.

Click the Tablet breakpoint pill in the breakpoint bar. Your canvas now shows a ~991px wide viewport. Elements that worked at Desktop may look cramped or overflow. Identify layout issues: multi-column Flexbox rows that need to stack vertically, text that's too large, or padding that's excessive. For each issue, select the element, make your adjustment in the Style Panel, and the change will apply ONLY to Tablet and below (cascading down). For a three-column Flex container that should become two columns at Tablet: select the parent Flex container, Style Panel > Layout > Flex > change Wrap to 'Wrap', and each child element to Width: 50%. The orange dot on the Wrap and Width properties confirms the Tablet-specific override.

To hide an element at a specific breakpoint, select it and switch to that breakpoint. In Style Panel > Layout > Display, select 'None'. The element disappears at that breakpoint and all smaller ones. To show a mobile-only element (like a simplified mobile menu or a stacked version of a desktop comparison table), create the element and set Display: None on Desktop. Switch to Mobile Portrait and set Display: Flex (or Block). Important: Display: None actually removes the element from the rendering (unlike visibility: hidden which only hides it visually). This is the correct approach for responsive hiding. In the Designer canvas, hidden elements show with a strikethrough in the Navigator.

Enable large breakpoints from the breakpoint bar. Click the '+' icon on the left side of the breakpoint bar (or hover over the area to the left of Desktop) and add 1440px. You can also add 1280px and 1920px. These breakpoints use min-width media queries and cascade UP from Desktop. Styles on the 1440px breakpoint apply only on screens ≥1440px. Use these to: prevent containers from stretching too wide (add max-width constraints), increase font sizes for very large displays, or adjust grid column counts for ultrawide screens. A common pattern: set section containers to Max Width: 1280px and Margin: 0 auto on Desktop, then at 1440px increase max-width to 1440px. Important: once you enable a large breakpoint, it cannot be deleted.

Viewport units make elements respond to the browser window size rather than parent containers. In the Style Panel, any size input field (width, height, font-size, padding, margin) accepts viewport units. Type your value followed by 'vw' (viewport width), 'vh' (viewport height), or 'svh' (small viewport height — accounts for mobile browser chrome). Common patterns: Set a section Height to 100vh for full-screen sections. Set a hero heading font-size to 6vw so it scales with the screen width. Set a container Max Width to 90vw so it has consistent side margins. For mobile-safe full-screen heights, use 100svh (small viewport height) instead of 100vh — 100vh on iOS Safari includes the browser toolbar height and causes overflow.

Typography set at Desktop often needs adjustment at mobile sizes. Switch to Mobile Portrait breakpoint (≤478px). Select your main heading (H1). In Style Panel > Typography, change Font Size to 28px (from Desktop's 48px). The orange dot confirms this is a Mobile Portrait-specific override. Set line-height to 1.2 if the heading wraps to multiple lines on small screens (tighter line-height works better for 2-line headings). For body text, reduce from 16px to 15px if space is tight. For button padding, reduce horizontal padding from 24px to 16px. These overrides cascade from Mobile Portrait to nothing smaller (it's the smallest breakpoint) — so they're safe changes.

Switch through each breakpoint from largest to smallest and check for: (1) Horizontal overflow — elements wider than the viewport causing horizontal scroll. Fix: select the overflowing element, check Width in Style Panel, switch to % or remove a fixed px width. (2) Text overflow — text breaking out of its container. Fix: check parent element width and add overflow: hidden or word-break: break-word via Custom Properties. (3) Spacing inconsistency — gutters that are too large on mobile. Fix: override padding/margin at the Tablet or Mobile Portrait breakpoint. (4) Stacked elements with incorrect order — Flex column direction reverses the visual order. Use the Flex Order property (Custom Properties > 'order') to reorder elements visually at a breakpoint without changing HTML structure.