Forum Documentation Showcase Pricing Learn more

Collapse margins

#1

I am trying to figure out the margins and collapse margin.

Right now I am playing around with having a group, that contains four other groups.

My goal is to make it so that when the page is made smaller the four groups inside will come together…what I mean is, I want them to retain their size, but lose the margins between them.

To set this up I thought I should make each of the four groups set to have a min width of 99% and max width of 100%

I also am not sure what the fixed margin should be for each of the four, nor do I understand why the collapse margin feature doesn’t make this work.

What I want to see as a result of the screen being made smaller is something like this

Unfortunately, what I get is this

I understand bubble is set to have fixed margins, but I would have assumed the collapse margin would have enabled things like what I want to accomplish.

Any help would be much appreciated.

Cheers

#2

If the page is set to have a minimum width, then you make it so the 4 boxes don’t wrap. Otherwise, Bubble will continue to shrink the horizontal width of elements to make them fit all of the way to the minimum page width.

#3

So would I be needing to check the box in the image below that says “Wrap to previous line if the page is stretched”?

I tried to do it with all checked and with all unchecked and no difference in the result.

I am attempting to make it so the space between the elements shrinks before any of the elements are placed below.

#4

I normally place a group in between each one and let it min width to 0, that should help.

2 Likes
#5

Thanks for the tip. Sounds like a good work around.

1 Like