W Webflow

How to make sites responsive on Webflow

beginner 8 min read Updated 2026-03-18
Quick Answer

Making sites responsive in Webflow involves using the built-in breakpoint system to adjust layouts, typography, and spacing across different screen sizes. You'll work with desktop, tablet, mobile landscape, and mobile portrait breakpoints while using Webflow's visual editor to optimize your design for each device.

Try Webflow Full Webflow Review

Prerequisites

  • Basic understanding of Webflow interface
  • Familiarity with CSS breakpoints
  • Knowledge of responsive design principles
  • Active Webflow project

Step-by-Step Instructions

1

Access the Breakpoint Menu

In the Webflow Designer, locate the breakpoint selector in the top toolbar. Click on the Desktop icon to reveal the dropdown menu showing all available breakpoints: Desktop (992px+), Tablet (768px), Mobile Landscape (478px), and Mobile Portrait (≤478px).
Always start designing on desktop and work your way down to smaller breakpoints for better workflow.
2

Set Up Your Base Desktop Layout

Ensure your desktop design is complete before making responsive adjustments. Select elements and check their Display, Position, and Flexbox/Grid settings in the Style panel. Use display: flex or display: grid for containers to create flexible layouts that adapt better across breakpoints.
Use relative units like percentages, em, or rem instead of fixed pixels where possible.
3

Switch to Tablet Breakpoint

Click the Tablet breakpoint in the breakpoint selector. The canvas will resize to tablet width. Select elements that need adjustment and modify their properties in the Style panel. Common changes include reducing Padding and Margin values, adjusting Font sizes, and changing Flex direction from row to column.
Changes made on smaller breakpoints only affect that breakpoint and smaller ones, not larger ones.
4

Optimize for Mobile Landscape

Switch to the Mobile Landscape breakpoint. Focus on simplifying navigation by potentially hiding certain menu items or switching to a hamburger menu. Adjust Grid columns to stack vertically using grid-template-columns: 1fr or change Flex wrap settings to wrap.
Test horizontal scrolling by checking if any elements exceed the viewport width.
5

Configure Mobile Portrait Layout

Select the Mobile Portrait breakpoint for the smallest screen optimization. Ensure all content stacks vertically by setting containers to flex-direction: column. Increase touch target sizes for buttons to at least 44px height. Reduce font sizes appropriately and ensure sufficient contrast for readability.
Hide non-essential elements on mobile using the visibility settings in the Style panel.
6

Test Interactive Elements

Use the Preview button to test your responsive design. Check hover states, dropdown menus, and forms across all breakpoints. Ensure Interactions and Animations work properly on touch devices by testing tap triggers instead of hover effects for mobile breakpoints.
Use Webflow's device preview or publish to staging to test on actual devices.
7

Optimize Images and Media

Select image elements and configure different sizes for each breakpoint in the Style panel. Use the Background image settings to set different images for different screen sizes. For video elements, ensure they're set to width: 100% and height: auto to maintain aspect ratios.
Consider using Webflow's responsive image settings to serve appropriately sized images for better performance.
8

Publish and Validate

Click Publish to make your responsive site live. Use browser developer tools to test additional breakpoints between Webflow's predefined ones. Validate your responsive design using tools like Google's Mobile-Friendly Test or by manually resizing your browser window to check for layout breaks.
Set up a checklist of key pages and elements to test across all breakpoints before final launch.

Common Issues & Troubleshooting

Elements overlapping on smaller screens

Check for fixed positioning or absolute positioning that may cause overlap. Switch to position: relative or position: static. Ensure container elements have proper min-height settings and aren't constraining child elements.

Text becoming too small or too large on mobile

Set appropriate font sizes for each breakpoint manually. Use rem or em units for better scaling. Check the Typography settings in the Style panel and adjust Line height for better mobile readability.

Navigation menu not working on mobile

Ensure you've created a proper mobile menu interaction. Use the Navbar component from Webflow's components panel, or create custom interactions for menu toggling. Check that the Navbar menu is set to display properly on smaller breakpoints.

Horizontal scrolling appearing on mobile

Check for elements with fixed widths exceeding the viewport. Set max-width: 100% on containers and images. Look for negative margins or padding that might push content outside the viewport. Use overflow-x: hidden on the body element if necessary.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Webflow website before purchasing.
Visit Webflow View Webflow Pricing