Archived topic

Space between columns

3 replies · Started by Heather on January 23, 2023

Viewing posts 1–4 of 4

January 23, 2023 at 3:06 pm #2506459

Hi
I've been trying to figure out why when on mobile there is space between the stacked columns, I've 4 columns when on desktop and then they stack on mobile, but I can't figure out how to close the gap. wondering if anyone can see what is causing it?

I've turned on Gutenberg with a bit of code so I could use it in woocommerce, which now I'm wondering if it was a bad idea and should have used a columns plugin of some sort instead.

Thanks

January 23, 2023 at 3:25 pm #2506476

Hi Heather,

WP addsrow-gap to its columns, and each <p> element has a default margin bottom.

Those 2 combined are the gap you see.

I would recommend using the Grid block of GenerateBlocks plugin instead of WP's columns block, so you can set vertical gap to 0 on mobile.

And the Headline block of GB allows you to set spacing (padding/margin) to the headline (can be used as paragraph as well), so you can set the bottom margin of the paragraph to 0.

January 23, 2023 at 4:26 pm #2506529

Thank you, I will give that a go, knew it would be something fairly simple to sort 🙂

Thanks again

January 23, 2023 at 5:32 pm #2506571

No Problem, glad to help :)

This archived topic is closed to new replies.

Start building better websites today.