- This topic has 13 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
November 9, 2020 at 6:56 am #1523981Matthieu
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
November 9, 2020 at 7:05 am #1524003DavidStaffCustomer SupportHi there,
try changing the Customizer > Layout > Container –> Content Layout to One Container
November 9, 2020 at 7:07 am #1524008MatthieuHello, no it’s not working, what I want is precisely that they are separated.
November 9, 2020 at 7:13 am #1524015DavidStaffCustomer SupportTry adding this CSS instead:
.archive.separate-containers.no-sidebar .site-main { background-color: #fff; }
November 9, 2020 at 7:18 am #1524023MatthieuIt still doesn’t work, as you can see on this page: https://www.mmgraphik.com/graphiste-freelance/ the containers are not separated ☹️
November 9, 2020 at 7:26 am #1524036DavidStaffCustomer Supportoops 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
November 9, 2020 at 7:37 am #1524053MatthieuIt’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
November 9, 2020 at 7:39 am #1524057DavidStaffCustomer SupportThats 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.November 9, 2020 at 7:47 am #1524072MatthieuGreat ! Thanks a lot 😄
November 9, 2020 at 7:48 am #1524074DavidStaffCustomer SupportYou’re welcome
November 9, 2020 at 8:15 am #1524113MatthieuAh, 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
November 9, 2020 at 8:52 am #1524146DavidStaffCustomer SupportThe 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.
November 9, 2020 at 9:07 am #1524165MatthieuIts good ! Thanks
November 9, 2020 at 3:39 pm #1524603DavidStaffCustomer SupportGlad to hear that
-
AuthorPosts
- You must be logged in to reply to this topic.