Need Help With Bubble Responsive Design - Homepage Looks Fine on Desktop but Breaks on Mobile

Need help
1

Hi everyone,

I’m building a marketplace in Bubble using the new responsive engine and I’m struggling with responsive behavior on mobile.

My homepage contains:

  • A header with logo, search bar, marketplace, account, favorites and cart buttons.

  • Several groups and repeating groups below the header.

  • A banner image that should span the full width of the screen.

The main issue is that on mobile some elements overlap and the layout does not reorganize correctly. For example:

  • Text blocks overlap each other.

  • Repeating Groups keep showing the same number of columns as desktop.

  • Some groups do not appear to stretch correctly across the available width.

  • The page looks correct in the Bubble editor but breaks on an actual phone.

Questions:

  1. What is the recommended way to handle different Repeating Group column counts on desktop vs mobile?

  2. Should I use separate Desktop and Mobile groups, or is there a cleaner responsive approach?

  3. What settings should parent groups have to ensure child elements properly resize and wrap on mobile?

  4. Is there a standard Bubble pattern for marketplace-style homepages with multiple cards and repeating groups?

2
  1. There are some settings on repeating groups for fixed columns or rows. If needing responsiveness you should likely not use fixed on either. Then you can set min width for columns to limit how small a column can become as page width reduces to force less columns naturally, which will go from say 4 to 3 to 2 on its own based on min width and current width of page.
  2. Usually not necessary, but can help in some complex design cases. Cleanest approach is good use of min/max widths, and correct choice of container layout types (column vs row) and proper grouping of elements. Some tricks come in handy as well like a row layout where on element might have min width 100% while others do not creating effect of most contained elements following row layout while on is basically creating a column layout (I do this with line separators or text as 100% mostly)
  3. Really depends on the design layout but still mostly focus on min and max widths
  4. Generally, not just bubble, it’s web design generally that has a few basic patterns that can be altered in small ways to get variation. Generally though you’ll see 4 cards or 3 card for repeating groups shrink down incrementally to maybe 1. You’ll have rows shrink to columns, so 3 items in row become 3 vertically staked, controlled by min/max widths. Pretty standard spacing concepts as well get applied where little bits of math come into play.

Good design is not overly complicated, it’s like beauty in nature, symmetry. What can be difficult is understanding how to synthesize down to basic concepts, so they can be applied properly and then knowing how to use formatting options to implement those concepts into your app.