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.

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.

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.