# How to respond to different screen sizes when designing in Bubble.io: Step-by-St

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

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
RESPONSIVE DESIGN — CHECKLIST
===============================

BREAKPOINTS:
  320px  — Mobile portrait
  480px  — Mobile landscape
  768px  — Tablet
  1024px — Laptop
  1200px — Desktop (default)
  1440px — Large desktop (custom)

CHECKLIST PER BREAKPOINT:
  [ ] Text is readable (min 14px on mobile)
  [ ] Headings scale down appropriately
  [ ] Multi-column layouts stack properly
  [ ] No horizontal overflow or scrolling
  [ ] Hidden elements have Collapse when hidden
  [ ] Mobile alternatives exist for desktop-only elements
  [ ] Touch targets are at least 44x44px
  [ ] Images resize without distortion
  [ ] Navigation is accessible (hamburger on mobile)
  [ ] Forms are usable with thumb-friendly spacing

COMMON PATTERNS:
  Desktop sidebar → Mobile hamburger menu
  3-column grid → 1-column stack on mobile
  Large hero image → Reduced height on mobile
  Data table → Card layout on mobile
  Horizontal tabs → Vertical accordion on mobile
```

## Common mistakes

- **Never testing in the responsive preview** — The editor shows one width — you miss layout breaks at other sizes Fix: Test at every breakpoint using the Responsive tab before deploying
- **Using exact pixel widths on all elements** — Fixed widths overflow on narrower screens Fix: Use percentage max-widths with pixel min-widths for fluid layouts
- **Forgetting Collapse when hidden on conditionally hidden elements** — Hidden elements leave blank space in the layout Fix: Always check Collapse when hidden for elements with conditional visibility
- **Only testing on desktop-width browsers** — Mobile devices have different rendering and touch interactions Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/respond-different-screen-sizes-designing-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/respond-different-screen-sizes-designing-bubble