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.
Prerequisites
- 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
Understand the UI builder mode in the Design tab
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.
Switch to the responsive preview mode
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.
Test your layout at each standard breakpoint
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.
Fix responsive issues by adjusting element properties
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.
Use breakpoint-specific settings for fine-tuned control
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 working example
1RESPONSIVE DESIGN WORKFLOW SUMMARY2===================================34MODES:5 UI Builder Mode (default in Design tab)6 - Add/edit elements on canvas7 - Configure properties in Property Editor8 - Design for default (widest) breakpoint910 Responsive Preview Mode (click Responsive tab/icon)11 - Drag handles to resize canvas12 - Preset breakpoints: 320, 480, 768, 102413 - Visual testing only — switch back to UI builder to make changes1415STANDARD BREAKPOINTS:16 Default (1200px+): Full desktop layout17 1024px (Laptop): Slightly narrower, check sidebar widths18 768px (Tablet): Multi-column → 2-column or stack19 480px (Mobile Landscape): Stack most content20 320px (Mobile Portrait): Single column, minimal padding2122COMMON FIXES BY BREAKPOINT:23 1024px:24 - Reduce side padding from 48px to 24px25 - Shrink sidebar widths2627 768px:28 - Set Repeating Group to wrap rows29 - Stack Row containers to Column30 - Reduce heading font sizes (36 → 28)31 - Hide non-essential sidebar elements3233 480px:34 - All content single column35 - Font sizes: headings 24px, body 14px36 - Padding: 16px throughout37 - Full-width buttons3839 320px:40 - Minimal padding (8-12px)41 - Check nothing overflows42 - Verify tap targets are 44px+ height4344RESPONSIVE PROPERTIES CHECKLIST:45 □ Max width: 100% on all groups46 □ Min width: 0 on all flexible elements47 □ Fit width to content: only where needed48 □ Collapse when hidden: checked on toggleable elements49 □ Wrap rows: enabled on RGs and Row containers50 □ No fixed pixel widths on responsive elements5152CONDITIONAL FORMATTING FOR RESPONSIVE:53 Condition: Current Page Width < 76854 → Font size: smaller value55 → Padding: reduced value56 → Visibility: not visible (for desktop-only elements)Common mistakes when switchhing from UI Builder mode to Responsive mode in Bubble.io: Step-by-Step
Why it's a problem: Using fixed pixel widths on elements that need to be responsive
How to avoid: Use percentage widths or set Min width to 0 and Max width to 100% so elements scale with their container
Why it's a problem: Only testing at one breakpoint and assuming other sizes work
How to avoid: Test at all four standard breakpoints (320, 480, 768, 1024) and also drag the responsive handle slowly to catch issues between breakpoints
Why it's a problem: Not checking Collapse when hidden on conditionally hidden elements
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Bubble app looks good on desktop but breaks on mobile. Can you give me a systematic checklist for making each section responsive, including which properties to adjust at each breakpoint?
Help me make my pages responsive. I need my 3-column layout to stack to 1 column on mobile, my heading text to shrink, and my sidebar to hide on screens below 768px wide.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation