# How to switch from UI Builder mode to Responsive mode in Bubble.io: Step-by-Step

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's editor has two primary modes: the UI builder (Design tab) for creating and styling elements, and the Responsive viewer for testing how your layout behaves at different screen widths. This tutorial explains how to navigate between modes, test at different breakpoints, and fix common responsive layout issues.

## Overview: UI Builder Mode vs Responsive Mode in Bubble

Bubble's Design tab serves two purposes: building your interface and testing its responsiveness. Understanding how to switch between these modes is essential for creating apps that work on desktops, tablets, and phones. This tutorial walks you through each mode, how to test at preset breakpoints, and how to adjust layouts for different screen sizes.

## Before you start

- A Bubble account with an app that has at least one page with elements
- Basic familiarity with Bubble's Design tab
- Pages upgraded to the new responsive engine (Flexbox-based)
- Understanding of container layouts (Row, Column, Align to Parent)

## Step-by-step guide

### 1. Understand the UI builder mode in the Design tab

When you open the Design tab, you are in the UI builder mode by default. This is where you add elements (click the + icon), drag them onto the canvas, and configure their properties in the Property Editor on the right. The canvas shows your page at full width. You can click any element to select it and see its properties. The Element Tree on the left shows all elements in a nested hierarchy. In this mode, you are designing for the default (widest) breakpoint.

**Expected result:** You can navigate the Design tab, select elements, and modify their properties in the UI builder mode.

### 2. Switch to the responsive preview mode

At the top of the Design tab, look for the Responsive tab or the responsive icon (it looks like a phone/tablet icon or a horizontal resize icon). Click it to enter responsive preview mode. The canvas changes to show resize handles on the sides. You can drag these handles to see how your page layout responds at different widths. The current width is displayed at the top. Bubble also provides preset width buttons for common breakpoints: Mobile portrait (320px), Mobile landscape (480px), Tablet (768px), and Laptop (1024px). Click any of these to snap to that width.

> Pro tip: Slowly drag the responsive handle from wide to narrow to watch exactly where your layout breaks — this helps you identify the precise widths where adjustments are needed.

**Expected result:** The responsive preview shows your page at different widths with drag handles and preset breakpoint buttons.

### 3. Test your layout at each standard breakpoint

Click through each preset breakpoint and check your page: at 1024px (laptop), verify all sections fit properly. At 768px (tablet), check that multi-column layouts wrap or collapse gracefully. At 480px (mobile landscape) and 320px (mobile portrait), ensure content stacks vertically, text is readable, buttons are tappable, and nothing overflows the screen. Make notes about what breaks at each width — you will fix these in the next steps.

**Expected result:** A list of layout issues at each breakpoint that need to be addressed.

### 4. Fix responsive issues by adjusting element properties

Switch back to the UI builder mode to make fixes. For elements that overflow: set Max width to 100% and remove any fixed pixel widths. For multi-column Repeating Groups that should stack on mobile: check the Wrap rows option so items wrap to the next line when space runs out. For text that is too large on mobile: use conditional formatting — add a condition 'When Current Page Width < 768' and set a smaller font size. For padding that is too large on mobile: add the same conditional to reduce padding values. For elements that should hide on mobile, add a condition to set visibility to not visible.

**Expected result:** Layout issues at smaller breakpoints are resolved by adjusting element widths, wrapping, font sizes, and visibility.

### 5. Use breakpoint-specific settings for fine-tuned control

Bubble allows you to set different property values at different breakpoints. In the Property Editor, some properties show a breakpoint icon next to them. Click the breakpoint icon to set a value that only applies at that breakpoint and below. For example, set the default row-gap to 24px and the mobile breakpoint row-gap to 12px. This way, larger screens use more spacing while mobile screens use tighter spacing. Breakpoint-specific values cascade downward — a setting at 768px applies to all widths below it unless overridden at a smaller breakpoint.

> Pro tip: Start designing at the widest breakpoint first, then adjust at each smaller breakpoint downward — this matches Bubble's cascade model.

**Expected result:** Different property values apply at different screen widths for a polished responsive experience.

## Complete code example

File: `Workflow summary`

```text
RESPONSIVE DESIGN WORKFLOW SUMMARY
===================================

MODES:
  UI Builder Mode (default in Design tab)
    - Add/edit elements on canvas
    - Configure properties in Property Editor
    - Design for default (widest) breakpoint

  Responsive Preview Mode (click Responsive tab/icon)
    - Drag handles to resize canvas
    - Preset breakpoints: 320, 480, 768, 1024
    - Visual testing only — switch back to UI builder to make changes

STANDARD BREAKPOINTS:
  Default (1200px+): Full desktop layout
  1024px (Laptop): Slightly narrower, check sidebar widths
  768px (Tablet): Multi-column → 2-column or stack
  480px (Mobile Landscape): Stack most content
  320px (Mobile Portrait): Single column, minimal padding

COMMON FIXES BY BREAKPOINT:
  1024px:
    - Reduce side padding from 48px to 24px
    - Shrink sidebar widths

  768px:
    - Set Repeating Group to wrap rows
    - Stack Row containers to Column
    - Reduce heading font sizes (36 → 28)
    - Hide non-essential sidebar elements

  480px:
    - All content single column
    - Font sizes: headings 24px, body 14px
    - Padding: 16px throughout
    - Full-width buttons

  320px:
    - Minimal padding (8-12px)
    - Check nothing overflows
    - Verify tap targets are 44px+ height

RESPONSIVE PROPERTIES CHECKLIST:
  □ Max width: 100% on all groups
  □ Min width: 0 on all flexible elements
  □ Fit width to content: only where needed
  □ Collapse when hidden: checked on toggleable elements
  □ Wrap rows: enabled on RGs and Row containers
  □ No fixed pixel widths on responsive elements

CONDITIONAL FORMATTING FOR RESPONSIVE:
  Condition: Current Page Width < 768
    → Font size: smaller value
    → Padding: reduced value
    → Visibility: not visible (for desktop-only elements)
```

## Common mistakes

- **Using fixed pixel widths on elements that need to be responsive** — Fixed widths do not shrink or grow with the screen, causing overflow and horizontal scrolling on smaller devices Fix: Use percentage widths or set Min width to 0 and Max width to 100% so elements scale with their container
- **Only testing at one breakpoint and assuming other sizes work** — Layouts can break at any width — an issue at 768px may not appear at 320px and vice versa Fix: Test at all four standard breakpoints (320, 480, 768, 1024) and also drag the responsive handle slowly to catch issues between breakpoints
- **Not checking Collapse when hidden on conditionally hidden elements** — Without Collapse when hidden, invisible elements still occupy space in the layout, leaving blank gaps on the page Fix: Check the Collapse when hidden property on every element that uses conditional visibility

## Best practices

- Design for the widest breakpoint first, then adjust downward at each smaller breakpoint
- Always set Max width to 100% on groups and containers for flexible scaling
- Use the Responsive preview to drag slowly from wide to narrow to find exact breakage points
- Check Collapse when hidden on every element that uses conditional visibility
- Use breakpoint-specific property values for padding, font sizes, and spacing
- Enable Wrap rows on Row containers and Repeating Groups for automatic mobile stacking
- Test with real content lengths — short placeholder text may look fine but longer real text may overflow

## Frequently asked questions

### How do I switch to responsive mode in Bubble?

In the Design tab, click the Responsive tab or the responsive icon at the top of the editor. The canvas will show resize handles and preset breakpoint buttons.

### Can I make changes directly in responsive preview mode?

You can adjust some breakpoint-specific properties in responsive mode, but for adding or significantly modifying elements, switch back to the UI builder mode.

### What are the standard breakpoints in Bubble?

Bubble provides preset breakpoints for Mobile portrait (320px), Mobile landscape (480px), Tablet (768px), and Laptop (1024px). You can also add custom breakpoints.

### Why does my layout look different in preview vs the editor?

The editor canvas and preview mode may render slightly differently. Always test in the actual Preview (browser tab) for the most accurate representation of how users will see your app.

### Do I need to upgrade pages to the new responsive engine?

The new Flexbox-based responsive engine is much more powerful than the legacy system. New apps use it by default. Older apps must upgrade each page individually — there is no downgrade path.

### Can RapidDev help make my Bubble app responsive?

Yes. RapidDev can audit your existing layouts, implement responsive fixes across all pages, and ensure your app works perfectly on desktop, tablet, and mobile devices.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/switch-ui-builder-mode-responsive-mode-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/switch-ui-builder-mode-responsive-mode-bubble