Bubble's responsive engine uses CSS Flexbox with four container layout types — Row, Column, Align to Parent, and Fixed. This tutorial walks you through building a mobile-friendly layout using min/max widths, breakpoints, collapse-when-hidden, and the responsive preview to ensure your app looks great on every device.
Overview: Mobile-Responsive Design in Bubble
Making your Bubble app mobile-responsive means it adapts gracefully to phones, tablets, and desktops. Bubble's responsive engine (built on CSS Flexbox) provides Row and Column containers, min/max sizing, and breakpoints to control how elements rearrange at different widths. This tutorial is for non-technical builders who want their app to look professional on every device without writing any code.
Prerequisites
- A Bubble account with an app using the new responsive engine
- Basic familiarity with the Design tab and Groups
- Understanding of what elements and containers are in Bubble
Step-by-step guide
Set your page to Column layout
Set your page to Column layout
Click on your page background (not any element) to select the page itself. In the Property Editor under Layout, set the container layout to 'Column.' This makes all top-level elements stack vertically. Set the page width to max-width 1200px with 'Center horizontally' checked for desktop centering, and min-width 320px so it never shrinks below a phone width.
Pro tip: Most professional web apps use a max-width of 1200px or 1440px for the main content area to keep text readable on ultra-wide monitors.
Expected result: The page has a Column layout with centered content that respects minimum and maximum widths.
Build section layouts using Row containers
Build section layouts using Row containers
For any section that needs side-by-side elements (like a feature grid or card row), add a Group with Layout set to 'Row.' Inside the Row, add child Groups for each column. Set each child's min-width to 280px and max-width to a percentage (e.g., 33% for three columns). The Row container automatically wraps children to the next line when they cannot fit — so three 33% columns will stack on narrow screens.
Expected result: A Row container holds multiple child groups that sit side by side on desktop and wrap/stack on mobile.
Configure min and max widths for fluid elements
Configure min and max widths for fluid elements
Select any element or Group. In the Layout section of the Property Editor, you will see Min width, Max width, Min height, and Max height fields. Set Min width to the smallest size the element should ever be (e.g., 280px for a card). Set Max width to a percentage or pixel value for its largest size. Check 'Fit width to content' only if the element should shrink to match its children. Leave it unchecked for elements that should stretch.
Pro tip: Use percentage max-widths for flexible layouts and pixel min-widths for readability floors.
Expected result: Elements resize fluidly between their min and max values as the browser width changes.
Use collapse-when-hidden for mobile-specific elements
Use collapse-when-hidden for mobile-specific elements
Some elements should only appear on desktop (like a sidebar) or only on mobile (like a hamburger menu). Select the element you want to hide on certain screen sizes. In the Layout properties, check 'Collapse when hidden.' Then go to the Conditional tab and add a condition: 'When Current page width < 480: This element is visible = no.' The element will disappear AND release its space on narrow screens.
Expected result: Desktop-only elements disappear on mobile and their space is reclaimed by surrounding content.
Test across breakpoints using the responsive preview
Test across breakpoints using the responsive preview
Click the 'Responsive' tab at the top of the editor. Use the width slider or click the preset device icons (mobile portrait, mobile landscape, tablet, laptop, desktop) to see how your page looks at each width. Check that Row containers wrap correctly, hidden elements collapse properly, and text remains readable. Fix any issues by adjusting min/max widths or adding conditional visibility rules.
Expected result: Your app displays correctly across all standard breakpoints from 320px mobile to 1440px desktop.
Add custom breakpoints for fine-tuned control
Add custom breakpoints for fine-tuned control
If the default breakpoints do not match your needs, go to the Responsive tab and click 'Add breakpoint.' Enter a custom pixel width — common choices are 768px (tablet), 1024px (small laptop), and 1440px (large desktop). At each breakpoint, you can override layout, visibility, font sizes, and spacing for any element. This gives you pixel-perfect control over how your app looks at every screen size.
Expected result: Custom breakpoints are defined and elements adapt their properties at each breakpoint.
Complete working example
1MOBILE-RESPONSIVE DESIGN — SETUP SUMMARY2==========================================34PAGE SETTINGS:5 Layout: Column6 Max-width: 1200px7 Min-width: 320px8 Center horizontally: checked910SECTION PATTERN:11 Row Container (100% width)12 ├── Card Group 1 (min: 280px, max: 33%)13 ├── Card Group 2 (min: 280px, max: 33%)14 └── Card Group 3 (min: 280px, max: 33%)15 → Wraps to stack on screens under ~840px1617MOBILE VISIBILITY RULES:18 Desktop sidebar:19 Conditional: When page width < 768 → visible = no20 Collapse when hidden: checked2122 Mobile hamburger menu:23 Conditional: When page width >= 768 → visible = no24 Collapse when hidden: checked2526BREAKPOINTS:27 320px — Mobile portrait28 480px — Mobile landscape29 768px — Tablet30 1024px — Small laptop31 1200px — Desktop32 1440px — Large desktop3334KEY PROPERTIES:35 - Min-width: prevents elements from shrinking too small36 - Max-width: controls maximum stretch37 - Fit width to content: shrink-wraps to children38 - Collapse when hidden: reclaims space39 - Row gap / Column gap: consistent spacing between childrenCommon mistakes when making a mobile responsive design in Bubble.io: Step-by-Step Guide
Why it's a problem: Using Fixed layout containers for page content
How to avoid: Use Column for vertical stacking and Row for horizontal arrangements. Only use Fixed for decorative overlays.
Why it's a problem: Setting exact pixel widths without min/max ranges
How to avoid: Always use min-width and max-width ranges instead of fixed widths. Use percentages for max-width.
Why it's a problem: Hiding elements without checking Collapse when hidden
How to avoid: Always check 'Collapse when hidden' in the Layout properties for any conditionally hidden element
Why it's a problem: Never testing in the responsive preview
How to avoid: Use the Responsive tab to test at every breakpoint before deploying to Live
Best practices
- Start with a mobile-first approach — design for 320px first, then expand for larger screens
- Use Column layout as your default page container and Row layout only when you need side-by-side elements
- Set min-width on all content elements to prevent text from becoming unreadably narrow
- Use gap properties (column-gap and row-gap) instead of margins for consistent spacing in Row/Column containers
- Check Collapse when hidden on every element that uses conditional visibility
- Test on actual mobile devices in addition to the responsive preview — touch interactions and real rendering can differ
- Keep your element hierarchy shallow — deeply nested groups complicate responsive behavior
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I have a Bubble.io app that looks fine on desktop but is broken on mobile. The layout does not stack properly and elements overflow the screen. Can you guide me through making it responsive using Row and Column containers, min/max widths, and breakpoints?
Make this page mobile-responsive. Convert Fixed layout containers to Row and Column layouts. Set appropriate min and max widths on all elements. Add conditional visibility to hide the sidebar on mobile and show a hamburger menu instead. Test at 320px, 768px, and 1200px breakpoints.
Frequently asked questions
Do I need to upgrade my pages to the new responsive engine?
Yes, if your pages use the legacy responsive engine. New apps default to the new engine. To upgrade, open a page in the Design tab and click the upgrade prompt if it appears. Note that there is no downgrade path once you upgrade.
What is the difference between Row and Column layout?
Column stacks children vertically (top to bottom). Row arranges children horizontally (left to right) and wraps them to the next line when they exceed the container width.
How many breakpoints should I set up?
For most apps, the default breakpoints plus one or two custom ones are sufficient. A common setup is 480px (mobile), 768px (tablet), and 1200px (desktop).
Can I have different content on mobile vs desktop?
Yes. Use conditional visibility rules with page width conditions. Show one version of an element on mobile and a different one on desktop. Check Collapse when hidden on both to prevent empty space.
Why does my Row container not wrap on mobile?
Check that child elements have flexible widths (percentage max-width, not fixed pixel widths). Children with fixed widths wider than the parent will overflow instead of wrapping.
Will responsive design affect my workload units?
No. Responsive layout changes (showing, hiding, resizing elements) are client-side operations that do not consume workload units.
Can RapidDev help optimize my app for mobile?
Yes. RapidDev helps Bubble builders create fully responsive applications with optimized mobile experiences, including touch-friendly navigation and performance tuning.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation