Layout > Container > Separating Space

Hi there,

try using this CSS to set the Separating Space for Desktop:

@media(min-width: 769px) {
    .generate-columns {
        margin-bottom: 40px;
        padding-left: 40px;
    }
}

Then you can use the Customizer to set the size for mobile

I did above, but not working....

Ooops sorry - wrong code. Try this:

@media(min-width: 769px) {
    .separate-containers .site-main {
        margin: 40px;
    }

    .separate-containers .widget,
    .separate-containers .site-main>*,
    .separate-containers .page-header,
    .widget-area .main-navigation {
        margin-bottom: 40px;
    }
    .separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar {
        margin-top: 40px;
        margin-bottom:  40px;
    }
}

Thanks David.

Can you please add option for changing Separating Space on mobile / desktop in next update?

We'll make a note of it :)

Dear David

Can you please advise to increase the separating space (20px) of (2 or 3) columns of posts on desktop of the said site...

Regards.

Have you solved this?

The topic is marked as resolved.

Dear Leo, Hi.

Resolved earlier, wanted to have further tweak ...

Raised another here: https://generatepress.com/forums/topic/increase-separating-space-on-desktop/

Ok sounds good.