Column stacking on mobile | WordPress.org

Hi @satrez

This break (and the gap) seems to be the default behavior of the Gutenberg Columns block.

What I suggest is:

1. Select the Column element
2. On the right hand side where you can configure it click on Advanced: https://imgur.com/pHnZR2V
3. Find the “ADDITIONAL CSS CLASS(ES)” field under it
4. Enter a custom class. I’ll be using “nogap”: https://imgur.com/xK5t5G1
5. Save the page/post
6. Open the following page:
7. Click on the “Additional CSS Field” label: https://imgur.com/tjqLwHn
8. Paste the following code:

@media (max-width: 782px){
	div.nogap{
		gap: 0;
	}
}

see: https://imgur.com/fZCSxpz

• 9. Click on “Publish”
• 10. If you have any kind of cache, clear it. (It seems like you have Nitropack, which I think does caching, but I’m not 100% sure.)

This will remove the gap from any columns that have the “nogap” class added to them (which was done at step 3 and 4). If you’d need to remove the gap from other columns, you can just add the “nogap” class on those, too. (No need to add the code again.)

@namona this is very useful! thanks so much for your quick response!

I’ve applied the code and cleared the cache. It has reduced the gap by quite a bit but there is still a bit of a gap.

Is there any way to remove it?

Hi @satrez

Oh, you’re totally right! For some reason I didn’t notice last time that there items are in a p tag and that has a bottom margin.

Try using this CSS instead at the /wp-admin/customize.php’s Additional CSS field:

@media (max-width: 782px){
    div.nogap{
        gap: 0;
    }
    .nogap div:nth-child(1) > p {
        margin-bottom: 0;
    }
}

This will both remove the column gap and the first column’s p tag’s bottom margin.

Hi @namona,

This works like a dream! You are amazing!

Thanks so much for your help!