[Resolved] Container separation

[Matthieu]

Hello, as we can see at the bottom of this page: https://www.mmgraphik.com/ , the containers are separated, which reveals the darker background around them. I wanted to reproduce this effect on this page: https://www.mmgraphik.com/graphiste-freelance/

Impossible to find the same thing, the containers are only one block whereas however I put in personalization that they were separate containers. A solution ?

Thanks

[David]

Hi there,

try changing the Customizer > Layout > Container –> Content Layout to One Container

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

[Matthieu]

Hello, no it’s not working, what I want is precisely that they are separated.

[David]

Try adding this CSS instead:

.archive.separate-containers.no-sidebar .site-main {
    background-color: #fff;
}

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

[Matthieu]

It still doesn’t work, as you can see on this page: https://www.mmgraphik.com/graphiste-freelance/ the containers are not separated ☹️

[David]

oops sorry i misread the request.
Will require a few steps.

1. In the page editor set the Page Builder Container to Contained, this will remove the content padding:

https://docs.generatepress.com/article/content-container/

2. Add this CSS to remove the background color from the container:

.page-id-1029.separate-containers .inside-article {
    background-color: transparent;
}

3. Now edit your Container and Grid Blocks add add the White Background color to each if them.
To add the space between; for your first Container Block give it some Bottom Margin:

https://docs.generateblocks.com/article/container-overview/#spacing

For your Grid Items set some Horizontal and Vertical Gap:

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

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

[Matthieu]

It’s perfect, thank you ! If I want to do this on other pages, I just have to repeat the directions? Will the page ID be different ?

Thanks

[David]

Thats correct. You can add multiple pages in your CSS like so:

.page-id-1029.separate-containers .inside-article,
.page-id-xxxx.separate-containers .inside-article.
.page-id-yyyy.separate-containers .inside-article {
    background-color: transparent;
}

Simply update the ID to match each page.
You can get the ID of the Page from the URL when editing the page.

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

[Matthieu]

Great ! Thanks a lot 😄

[David]

You’re welcome

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

[Matthieu]

Ah, I’m coming back ! 😅 As we can see the spacing between the two top and bottom containers are not the same on this page: https://www.mmgraphik.com/ and on this page: https://www.mmgraphik.com/ freelance-graphic designer /

Yet the settings are the same. Is this normal?

Just a little guess, the containers of this page: https://www.mmgraphik.com/ are created via a hook type element: ‘generate_after_main_content’ if that helps you

Thanks

[David]

The freelance page has had its padding removed by the Page Builder Container being set to Contained. You will need to adjust the Margins of those Blocks on the freelancer page to accomodate for that.

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

[Matthieu]

Its good ! Thanks

[David]

Glad to hear that

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

[Author]

Posts