Beginner
How to make sites responsive on Webflow
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.
Prerequisites
- Basic understanding of Webflow interface
- Familiarity with CSS breakpoints
- Knowledge of responsive design principles
- Active Webflow project
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).
Tip
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.Tip
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.
Tip
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.Tip
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.Tip
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.
Tip
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.Tip
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.
Tip
Set up a checklist of key pages and elements to test across all breakpoints before final launch.
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.Ready to get started with Webflow?
Put this tutorial into practice. Visit Webflow and follow the steps above.
Visit Webflow →