Design your Bubble app for all screen sizes using breakpoints, the responsive preview, container layout types, and conditional visibility. This tutorial covers how elements adapt from mobile to desktop, how to hide or rearrange content at different widths, and how to test your responsive design systematically.
Overview: Designing for Different Screen Sizes
Every Bubble app needs to work on phones, tablets, and desktops. This tutorial focuses on the responsive design fundamentals — breakpoints, responsive preview testing, and strategies for adapting your layout across screen sizes — ensuring a consistent experience for all users.
Prerequisites
- A Bubble account with an app using the responsive engine
- Basic familiarity with the Design tab
- Understanding of Row and Column container types
Step-by-step guide
Understand Bubble's default breakpoints
Understand Bubble's default breakpoints
Bubble provides preset breakpoints matching common devices: mobile portrait (~320px), mobile landscape (~480px), tablet (~768px), and laptop (~1024px). Open the Responsive tab at the top of the editor to see these presets. Each breakpoint lets you override element properties like layout, visibility, font size, and spacing.
Expected result: You understand the available breakpoints and how to access them.
Test your current layout in responsive preview
Test your current layout in responsive preview
Click the Responsive tab and drag the width slider from 1440px down to 320px. Watch how your elements behave. Note any issues: text overflow, elements overlapping, content becoming unreadably narrow, or gaps where hidden elements should collapse. This is your baseline for responsive improvements.
Expected result: You have identified responsive issues at different widths.
Configure elements to stack on narrow screens
Configure elements to stack on narrow screens
Select Row containers that hold side-by-side content. Their children automatically wrap to the next line when they cannot fit. Ensure child elements have min-width values (e.g., 280px) so they stack before becoming too narrow. For three-column layouts, children wrap to two columns on tablet and one column on mobile.
Expected result: Multi-column layouts stack gracefully on narrow screens.
Hide desktop-only elements on mobile
Hide desktop-only elements on mobile
Select elements that should not appear on mobile (sidebars, large decorative images, complex tables). Go to the Conditional tab and add: When Current page width < 768 → visible = no. Check 'Collapse when hidden' in the Layout properties so hidden elements do not leave empty space. Create mobile-specific alternatives (hamburger menu, simplified tables).
Pro tip: Create separate mobile and desktop versions of complex elements rather than trying to make one version work everywhere.
Expected result: Desktop elements hide on mobile, and mobile alternatives appear.
Adjust typography and spacing per breakpoint
Adjust typography and spacing per breakpoint
At mobile breakpoints, reduce heading font sizes (e.g., 36px on desktop → 24px on mobile). Reduce padding and margins on mobile to maximize content space. Select any element, switch to a mobile breakpoint, and override its properties. These overrides only apply at that breakpoint and narrower.
Expected result: Text is readable and spacing is appropriate at every screen size.
Add custom breakpoints for edge cases
Add custom breakpoints for edge cases
If your design breaks at a width not covered by defaults, add a custom breakpoint. In the Responsive tab, click 'Add breakpoint' and enter the pixel width. Common additions: 640px for large phones, 900px for small tablets, 1440px for large monitors. Define property overrides at each custom breakpoint as needed.
Expected result: Custom breakpoints handle edge cases where the default presets are insufficient.
Complete working example
1RESPONSIVE DESIGN — CHECKLIST2===============================34BREAKPOINTS:5 320px — Mobile portrait6 480px — Mobile landscape7 768px — Tablet8 1024px — Laptop9 1200px — Desktop (default)10 1440px — Large desktop (custom)1112CHECKLIST PER BREAKPOINT:13 [ ] Text is readable (min 14px on mobile)14 [ ] Headings scale down appropriately15 [ ] Multi-column layouts stack properly16 [ ] No horizontal overflow or scrolling17 [ ] Hidden elements have Collapse when hidden18 [ ] Mobile alternatives exist for desktop-only elements19 [ ] Touch targets are at least 44x44px20 [ ] Images resize without distortion21 [ ] Navigation is accessible (hamburger on mobile)22 [ ] Forms are usable with thumb-friendly spacing2324COMMON PATTERNS:25 Desktop sidebar → Mobile hamburger menu26 3-column grid → 1-column stack on mobile27 Large hero image → Reduced height on mobile28 Data table → Card layout on mobile29 Horizontal tabs → Vertical accordion on mobileCommon mistakes when responding to different screen sizes when designing in Bubble.io: Step-by-St
Why it's a problem: Never testing in the responsive preview
How to avoid: Test at every breakpoint using the Responsive tab before deploying
Why it's a problem: Using exact pixel widths on all elements
How to avoid: Use percentage max-widths with pixel min-widths for fluid layouts
Why it's a problem: Forgetting Collapse when hidden on conditionally hidden elements
How to avoid: Always check Collapse when hidden for elements with conditional visibility
Why it's a problem: Only testing on desktop-width browsers
How to avoid: Test on actual mobile devices or use browser developer tools with device emulation
Best practices
- Test at every breakpoint before deploying to live
- Design mobile-first, then add complexity for larger screens
- Use Collapse when hidden on all conditionally visible elements
- Keep touch targets at least 44x44px for mobile usability
- Create separate mobile and desktop navigation components
- Use Row containers for content that should stack on narrow screens
- Set min-width on text containers to maintain readability
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Bubble.io app looks broken on mobile — elements overlap and text is too small. Can you guide me through making it responsive with breakpoints, conditional visibility, and mobile-specific adjustments?
Make this page responsive for all screen sizes. Test at mobile, tablet, and desktop breakpoints. Hide the sidebar on mobile, add a hamburger menu, and ensure all text is readable at 320px width.
Frequently asked questions
Can I preview my app on actual device sizes?
Yes. The Responsive tab has preset icons for mobile, tablet, and desktop. Click each to see your page at that width. Also test on real devices by opening your app URL on a phone.
Do responsive changes affect workload units?
No. Layout changes, visibility toggling, and resizing are client-side operations that consume zero workload units.
Should I use the legacy or new responsive engine?
Always use the new responsive engine. It is based on CSS Flexbox and provides much better control. New apps use it by default. Legacy pages should be upgraded.
How do I make images responsive?
Set the Image element's max-width to 100% and enable 'Fit width to content' on the parent. The image will scale down with its container.
Can I have completely different layouts per breakpoint?
Yes. At each breakpoint you can override layout type, visibility, spacing, and element order. Create two versions of a section and show/hide them at different widths.
Can RapidDev optimize my app for mobile?
Yes. RapidDev creates fully responsive Bubble applications with optimized mobile layouts, touch-friendly interfaces, and thorough cross-device testing.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation