Space Between Rows On Mobile

Hi there,

so the Columns Block has 1.75em bottom margin by default. In addition to that the Featured category block also has it owns bottom margin.

I would selectively remove the bottom margin from the Columns block by:

1. Select the Columns Block, and in the Advanced > Additional CSS Class(es) field add: no-bottom-margin

2. Add this CSS:

.wp-block-columns.no-bottom-margin {
  margin-bottom: 0;
}

This way you can keep the default bottom margin where required, and use the no-bottom-margin class to remove it where you need to.

Awesome, so this worked on the mobile but then on the desktop all the block merge together instead of having any space. What would we change?

Have you fixed the issue? I’m not seeing it.

Also, have you considered using the Grid blocks from GenerateBlocks so you can have completely control over the columns and spacing using the options instead of writing custom CSS?
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item
https://docs.generateblocks.com/article/container-overview/#remove-vertical-gap

So sorry. Did not apply to the site I originally sent. It is applied to baseballequip.com if you can see it there. I have not looked at your other option.

Ok I actually figured out the generate blocks thing so I will use that. Thanks for your help and always fast responses.

Glad to hear ??