I haven’t Bubbled for 10 months. It’s not quite like riding a bike
If I have 3 groups in a row like this:
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:
I’m trying to avoid this:
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.
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