Responsive: How to force all groups to stack vertically as soon as 1 does?

I haven’t Bubbled for 10 months. It’s not quite like riding a bike :slight_smile:

If I have 3 groups in a row like this:

Screen Shot 2020-07-09 at 6.01.14 PM

As soon as the page gets too narrow for all of them to fit horizontally, I want all of them to stack vertically, like this:

Screen Shot 2020-07-09 at 6.01.33 PM

I’m trying to avoid this:

Screen Shot 2020-07-09 at 6.01.42 PM

Any tips?

Editor: phil-testing | Bubble Editor

That’s a toughy. The only way I can think of is to duplicate the middle and groups as the second third stacked groups and use hiding rules based on page width.

1 Like

The 3 groups should be all grouped together. In this example, I gave the distance each 30px on each side of the group to ensure even spacing when shrunk.

Cool, are you able to make your app public so I can see it? Thanks!

Oops, sorry. Should be open now.

Is this expected?

Hey @SerPounce!

I think only if you’re not choosing a size within the responsive tab.

Otherwise should render this:

Thanks for taking the time @lantzgould. But yes, as @SerPounce showed, there is a point (between 798px and 1106px) where there are 2 groups in a row and then the 3rd group is below. That’s what I’m trying to avoid.

ah, right. Understood.
TBH I was pretty excited to check out your solution as I have also struggled to solve this problem for my responsive needs. Cool possibility you shared, but I find that the sizes provided don’t cover all scenarios.

Still, this is best approach i’ve seen. Thanks for sharing.

1 Like

Ah, yeah you guys are right. Sorry.

In most scenarios this should be sufficient (just testing through chrome tools of sizes)

Will update in the future if I come across something that ensures the width stays consistent.

1 Like