Responsive Design - Mobile & Tablet Views

Why Responsive Design Matters

Your site needs to look great on:
- Desktop - 1920px+ wide screens
- Tablet - 768-1024px screens (iPad, tablets)
- Mobile - 375-480px smartphone screens

Viewing Different Breakpoints

In the top right of the Designer, you'll see responsive view buttons:
- Desktop - Full-size view
- Tablet - Tablet size view
- Mobile - Mobile phone size view

Click to switch between views and edit each separately.

Editing Mobile Layouts

1. Click the Mobile button
2. Select elements that need adjustment
3. Change their styling just like desktop
4. These changes apply only to mobile
5. Desktop styling remains unchanged

Common Mobile Adjustments

Stack Layouts Vertically
Change flex direction from Row to Column so items stack on phones.

Reduce Spacing
Mobile screens have less real estate - reduce padding and margins.

Hide Elements
Some elements don't need to appear on mobile:
1. Select the element
2. In Properties, find Display
3. Under the mobile breakpoint, set to None
4. Element is hidden on mobile only

Enlarge Touch Targets
Buttons and clickable elements should be at least 44x44 pixels on mobile.

Simplify Navigation
Menus often become hamburger menus on mobile (if template supports it).

Test on Real Devices

Webflow's preview is helpful, but always test on real devices:
1. Click Share or Preview in top right
2. Get the preview link
3. Open on your actual phone and tablet
4. Test all interactions and check readability

Mobile-First Thinking

Best practice: Start with mobile design, then enhance for larger screens.

Breakpoints Used by Most Templates:
- Mobile: 320px - 479px (small phones to large phones)
- Tablet: 480px - 767px (tablets to small tablets)
- Desktop: 768px+ (laptops and desktops)

Some templates use custom breakpoints - check your template docs.