Column stacking on mobile

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: https://yoursite.com/wp-admin/customize.php
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!

@namona I tried to use nogap again, but when I am using bullet points in the colum there is still a gap visible on mobile.

You can see it in this blog post here: https://gatheringdreams.com/healthy-spring-dinner-ideas/

It’s the bullet points a bid down the beginning of the page when it says “What’s in Season in Spring?”

On mobile there is still a gap.

Any suggestion?

Thanks so much!

@namona just following up on this to see if you have any idea?

This gap is coming from the bottom margin of the first UL tag. I recommend this code instead, which should take care of it:

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

@namona amazing! That works great! Thanks so much for your help! ??