Responsive Design Notes for Bubble.io

How to make each template work across desktop, tablet, and mobile using Bubble's responsive engine.

Bubble's Responsive Engine (Current Version)

Bubble uses a flexbox-based layout system with rows and columns. Key concepts:

• Container layout: Every group is either a Row (horizontal), Column (vertical), or Align to Parent (absolute positioning)
• Min/Max width: Elements stretch to fill their container but respect min-width and max-width constraints
• Wrapping: Row containers can wrap their children to the next line when they don't fit
• Conditional visibility: Hide/show elements based on page width
• Gap: Spacing between child elements in a container

If your Bubble app still uses the legacy fixed-width engine, you'll need to migrate to the responsive engine first. In the Bubble editor, go to Settings → General → check "Make this application responsive."

Breakpoint Strategy

Bubble doesn't have explicit breakpoints like CSS media queries. Instead, you achieve responsive behavior through:

1. Flexible widths (min/max instead of fixed)

2. Row wrapping (children flow to next line)

3. Conditional visibility (hide elements at narrow widths)

Recommended Width Targets

Per-Template Responsive Notes

SaaS Dashboard

Desktop (1024px+):

• Sidebar: 240px fixed width, always visible
• Widget grid: 4 columns
• Dashboard header: row layout with controls inline

Tablet (768px):

• Sidebar: collapsed to icon-only (60px) or hidden behind hamburger
• Widget grid: 2 columns
• Header controls: stack vertically or move to a dropdown

Mobile (<768px):

• Sidebar: hidden, accessed via hamburger menu (floating group)
• Widget grid: 1 column, full-width cards
• Date range picker: full-width dropdown
• Hide export button (move to a menu)

Implementation:

• Sidebar group: min-width 60px, max-width 240px. Add a conditional: when page width < 768, this element's width = 0 (hidden)
• Widget repeating group: set to "Min width of column" = 280px with wrapping enabled. On desktop, 4 fit per row. As the page narrows, it naturally becomes 2, then 1.

Marketplace

Desktop: 3-column listing grid, sidebar filters visible

Tablet: 2-column grid, filters collapse into a "Filters" button that opens a popup

Mobile: 1-column listing cards, search bar at top, filters in a bottom sheet

Key responsive elements:

• Search results grid: Use min-width 300px per column with wrapping
• Filter sidebar: Visible on desktop, hidden on mobile with a toggle button
• Listing detail image gallery: Full-width on mobile, 60/40 split on desktop
• Messaging inbox: Two-panel on desktop, conversation list only on mobile (tap to open thread in separate view)

Booking System

Desktop: Calendar shows full week view, sidebar with service list

Tablet: Calendar shows 3-day view, service list above calendar

Mobile: Calendar shows day view only, available slots in a scrollable list

Key responsive elements:

• Booking flow steps: Horizontal stepper on desktop, vertical on mobile
• Calendar: This is typically handled by the calendar plugin's responsive settings. Most plugins auto-adapt.
• Available time slots: Grid of buttons on desktop (4 per row), 2 per row on mobile
• Booking confirmation: Full-width card layout on mobile

Directory

Desktop: Map + list split view (60% list, 40% map), sidebar filters

Tablet: List view with map toggle button (not split)

Mobile: List view only, map accessible via "View Map" button, search bar sticky at top

Key responsive elements:

• Map/list split: Use a row container with wrapping. Map has min-width 300px. When viewport is too narrow, map wraps below the list
• Listing cards: 3-column on desktop, 2 on tablet, 1 on mobile (use min-width wrapping)
• Contact info on listing detail: Sidebar on desktop, below description on mobile
• Hours table: Horizontal on desktop, vertical/accordion on mobile

Community Platform

Desktop: Three-column layout (sidebar nav, main content, trending/leaderboard sidebar)

Tablet: Two columns (nav sidebar collapsed, main content + trending below)

Mobile: Single column, bottom navigation bar, trending hidden

Key responsive elements:

• Post list: Compact card layout on mobile (hide view count, show just title + author + reply count)
• Reply threading: Reduce indent depth on mobile (max 2 levels instead of unlimited)
• Reply editor: Full-width on mobile with simplified toolbar
• Leaderboard sidebar: Hidden on mobile, accessible from bottom nav

Universal Responsive Patterns

Pattern: Collapsible Sidebar

Works for: SaaS Dashboard, Booking System

1. Create the sidebar as a group with min-width 0 and max-width 240

2. Add a custom state sidebar_open (yes/no, default: yes)

3. When sidebar_open = yes → width = 240, show labels

4. When sidebar_open = no → width = 60, show icons only

5. On page load: If page width < 768, set sidebar_open = no

6. Add a hamburger icon that toggles the state

Pattern: Stack on Mobile

Convert horizontal rows to vertical columns on narrow screens:

1. Use a Row container with wrapping enabled

2. Set each child's min-width to approximately 50% of mobile viewport (e.g., 300px)

3. On desktop, children sit side by side

4. On mobile, wrapping causes them to stack vertically

This is the single most useful responsive pattern in Bubble.

Pattern: Responsive Navigation

Desktop: Horizontal nav bar or vertical sidebar with text labels

Mobile: Bottom tab bar (for apps) or hamburger menu (for content sites)

Implementation:

1. Create two navigation elements: desktop_nav and mobile_nav

2. desktop_nav: visible when page width >= 768

3. mobile_nav: visible when page width < 768

4. mobile_nav is a floating group pinned to the bottom with 4–5 icon tabs

Pattern: Responsive Tables

Tables don't work well on mobile. Three alternatives:

1. Card layout: Each row becomes a card with fields stacked vertically

2. Horizontal scroll: Wrap the table in a group with horizontal scrolling

3. Priority columns: Show only essential columns on mobile, full table on desktop

Card layout is best for most cases:

Desktop: Repeating group layout = Full list (table rows)
Mobile: Repeating group layout = Extended (card-style cells)

Pattern: Responsive Typography

Use Bubble's responsive text settings:

• Heading 1: 28px desktop → 22px mobile
• Heading 2: 22px desktop → 18px mobile
• Body: 16px on all sizes (never go below 14px on mobile)
• Caption: 14px desktop → 12px mobile

Set these in your app's Styles tab for consistency.

Testing Responsive Layouts

1. Bubble's responsive viewer: In the editor, click "Responsive" tab to drag the viewport width

2. Chrome DevTools: F12 → toggle device toolbar → select device presets

3. Real devices: Always test on at least one actual phone — emulators miss touch target size issues

Common Responsive Bugs

"My sidebar overlaps the content on mobile"

Set the sidebar's min-width to 0 and use conditional width. Make sure the main content group doesn't have a fixed left margin — use the sidebar as a flex sibling instead.

"Text is too small on mobile"

Check your font sizes. Body text should be at least 14px on mobile. Don't rely on users pinch-zooming.

"Buttons are too small to tap"

Minimum touch target size is 44x44 pixels (Apple's guideline). Make sure buttons and clickable elements meet this on mobile.

"My repeating group is just one column on desktop"

Check that the repeating group's layout is set to Grid or Extended, not Full List. For Grid, verify the number of columns setting.

*Responsive design isn't about making things fit — it's about making things work on every device.*