Responsive keeps breaking - help please?

Hello great people, new to bubble and learning
been trying to get these three groups to stand next to each other in a row.
Something i’m doing is wrong in this case, loom added.

When I try it as a stand alone, it works fine.
Maybe my group container is wrong?
I’m asking to learn and understand what is the mistake i’m having. thanks

The only logical explanation is Group services’s width is smaller than 1128 :slight_smile:

1 Like

Hi there,

I noticed each of your elements has a fixed width, instead of a range (Min and Max). Try setting a range instead so the elements will actually be responsive.

1 Like

it has 1128 not sure what’s wrong there :slight_smile:

The explainer i got and the width are aligned, the 355 shuold fit with three group inside of it, for the life of me, did this like 7 times…
I think the mistake is somewhere else?
Any help would be highly appreciated
Now with your help, it went to all in one row but no gap between when i space between, like before

Make it bigger and try. Because this outer container is what is squeezing the inner 3 fixed width groups.

Very interesting, i tried, now they fit, but although i see the gap in the editor it won’t appear in the preview.
Last suggestions before I stop nagging you?
Thank you so so much man

It doesnt matter. The pixel-by-pixel setting stuff mostly will fail at some point. You either learn how to work with percentages or a width height interval (such as better use of min-max width and height). Creating responsive stuff is hard anyways though. It requires a lot of practice. Maybe work on an empty test bubble app different layouts, height, width settings etc.

Look at padding, margin, group spacing, etc. All contribute to total width.

Thank you so much