Guttenberg gap between columns when stacked for smaller resolutions

One other thing I forgot to mention, I'm getting a horizontal scrollbar on my homepage only, I found some CSS in another forum topic which removed it but then caused further issues on mobile - if you could advise on this too that'd be awesome.

Thanks
Greg

Hi there,

Yeah - the Gutenberg developers keep 'updating' the columns and neglect to include mobile responsiveness. Try this CSS:

@media (max-width: 782px) {
    .wp-block-columns .wp-block-column {
        margin-bottom: 2em !important;
    }
}

@media (max-width: 782px) and (min-width: 600px) {
    .wp-block-columns .wp-block-column:nth-child(2n) {
        margin-left: 0 !important;
    }
}

We have just released the Alpha version of our own block plugin, which you may be interested in testing for the future:

https://generateblocks.com

Thanks for the info David, I like the look of Generate Blocks and have just tried giving it a spin, works well - although I can't seem to get a container with a full width background to work - anything I'm missing?

Thanks
Greg

Hi guys

I've switched over to Generate Blocks and on the whole really pleased with it - but still having the issue of no spacing between the columns when on mobile - any ideas? I seem to be getting an odd overlap of the columns now...

Thanks for any help
Greg

Did you resolve the Full Width container ?

For the gutters - select the Grid Container and set the Vertical Gap:

https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

I did thanks David, Tom got back to me on email - I just had to set the page layout as full width then put everything into the new GB containers and grids.

Thanks for that, I've added 30px for mobile vertical gap but I still seem to have the overlap issue - I don't suppose you know what might be causing that?

Thanks for your replies
Greg

It's because of your Custom CSS:

.categories {
    background-image: url(https://kentdesign.co.uk/wp-content/uploads/Confetti-WhiteOverlay.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding: 14px;
    border-radius: 4px;
    box-sizing: border-box; /* Add this to cure the gap */
}

You can either add the box-sizing property i included with comment above .... or simply scrap the CSS and do it all in GenerateBlocks :)

That's awesome, thanks David, my CSS is a bit rusty so appreciate you offering support for my custom code when it's not a theme issue. All looking exactly as I wanted now :)

No problems - glad to be of help.
You can of course do it without any CSS .... my paid days for custom CSS are numbered lol

Haha mine too judging by this, that or they never really started :D

Thanks again!