Why aren't these margins collapsing?

I’ve got some margins set to collapse but they’re not collapsing.

Video showing issue:


Margins are set to collapse when container width less than 2000

Container width less than 2000 but margins don’t collapse (still have the 101 px original margin)

Happening with both left and right margins. Any advice you can offer would be appreciated.

When you group the cards together it should work as expected.

Responsive engine works by it’s own rules :stuck_out_tongue:

btw Collapsing margins is not about squeezing the margins. It’s about setting it to 0 when Container width < X.

So in your example even your top container is not really collapsing… it’s just responsive as the group does not have fixed width. I assume your page in editor is not really set to have width of 2000px so setting the collapse rule for 2000x could be really abstract unless you have monitor where you can stretch the responsive page > 2000px

I build an example here so you can see the collapse action - when the edges jump to edge of the page that is collapse rule in action + the cards you have


@bartek.dev, thanks so much for the detailed reply!

The grouping suggestion worked perfectly.

I checked out your example too. Makes it easy to see that margins aren’t squeezed but suddenly go to zero.

I notice each of the three groups set to collapse at 1050: Group F (that contains the three groups) and Groups B and D (the left and right groups contained within Group F). I couldn’t edit your page to test but I’m wondering if it’s necessary to have the 1050 condition on Groups B and D or if the condition on Group F would be sufficient.

Thanks again!

Glad I could help :slight_smile:

Sorry I forgot to delate it as I was testing it without Group F. Yes, the collapse rule is only needed on Group F. You do not have to use on the Card groups.

I changed the example in the editor so you can have a look.

1 Like