[Resolved] CSS to reduce the Columns Space

[purnima banik]

Hi Tom,

I want to reduce the space between the columns horizontally and also the space in between the next column row vertically. All of the columns on my webpage are created with block editor. Please Suggest the Solution to achieve the desired result. I want to achieve this on this webpage is Here.

[Leo]

Hi there,

You can try some CSS like this:

@media (min-width: 782px) {
    .wp-block-column:not(:first-child) {
        margin-left: 20px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[purnima banik]

That worked fine to reduce the spaces between the column, but I also wanted to reduce the gap between the row as well, I mean horizontally.

[David]

Hi there,

try this CSS:

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

.wp-block-column p {
    margin-bottom: 0.5em !important;
}

[purnima banik]

Thank You, that worked perfectly.

[David]

You’re welcome

[Author]

Posts