[Resolved] Separate Containers

[Michal Janata]

Hello,
I have a problem with your Content Layout. I have set Separate Containers and Space Separating got 30 px. What should I set?

thank you for the info

[Tom]

Not too sure what you mean? Is the separating space not working?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michal Janata]

Yes, separating space not working.

[Michal Janata]

And one more thing. The problem to me appears only in Sections extension.
https://generatepress.com/downloads/generate-sections/

It would not add to this extension.

[Leo]

Hi Michal,

Padding for each section can be adjusted in the Section Settings. Check out “Opening the Section Settings” here: https://docs.generatepress.com/article/sections-overview/

Let us know.

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

[Michal Janata]

have another problem. I want to have separate color sections. For example https://tancovani.skauting.cz/

And among those sections I want to be able to adjust the gap.

[Leo]

You can choose the Background Color for each section in Sections Settings as well.

Not quite sure what you meant by gap, did you try adjusting the top/bottom paddings?

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

[Tom]

Separate containers are ignored in Sections.

To add margin between sections, give your section a custom class, like “section-margin”. Then, add this CSS:

.section-margin {
      margin-bottom: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michal Janata]

This is a better example. I have a background image. A section on the home page.

https://sft.skauting.cz/ – no gap
https://sft.skauting.cz/aktuality/ – Gap operates. Offset from the menu and footers

It looks weird when the gap somewhere. And sometimes it is not.

[Tom]

Ah, this should do it:

.sections-no-sidebars.generate-sections-enabled.separate-containers #main.site-main {
    margin: 10px 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michal Janata]

Super! And how to achieve the same 10px padding between sections?

.section-margin {
      margin-bottom: 20px;
}

This is not working…

[Tom]

Did you add the section-margin class to the section you’re wanting to add margin to? https://docs.generatepress.com/article/sections-overview/

If you want it to apply to ALL sections, you can do this:

.generate-sections-container {
    margin-bottom: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michal Janata]

I have a child themes. Whoever I put in my style.css and it does not work.

[Tom]

Try making it more specific:

body .generate-sections-container {
    margin-bottom: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michal Janata]

Still nothing. And I put it into style.css? Or settings for each section?

[Author]

Posts