Space between sections

[Alessia]

Hello dear GP-Team,

when I want to have some space between my text sections, what can I do?

As example: I want to have between my text sections (with content background color) some space with the color of my background. Can I add an empty section for that or some custom CSS?

Thank you in advance!

[Leo]

Hi Alessia,

By sections do you mean Sections add on?

Can you provide a link to your site?

Thanks!

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

[Alessia]

Hi Leo,

yes, with sections add on.

At the bottom of my homepage singlevip.de you can see what do I mean.
So I want to devide my text sections in some content parts and to have some space between them.

[Alessia]

I do this with a new section with an empty space, but I don’t know if it the right way.

[Leo]

ahh I see what you are saying 🙂

Try this CSS:

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

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

Let me know if this is what you wanted.

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

[Alessia]

Perfekt, thank you! 🙂

And, what should I do, to have the title of each content section as a line with other color? Then I shoud to add this title as extra section with my wished background?

[Leo]

Depends what you are using for the title (h1/h2 etc.)

Try this CSS and you should see it change for your h2 titles in the existing content:

.generate-sections-container h2 {
    background-color: #000000;
}

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

[Alessia]

Thank you very much for your help, Leo! 🙂

One more question:
I tried it with sections, but I can’t see any sidebar. But the option is activated. It is maybe of the section addon? https://www.singlevip.de/parship-erfahrungen-und-test2/

[Leo]

You’re welcome 🙂

See Tom’s explanation and alternative solution here: https://generatepress.com/forums/topic/sidebar-2/#post-227266

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

[Alessia]

Perfect, its working! Thank you!! 🙂

[Leo]

Glad I could help 🙂

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

[Alessia]

Hi Leo,

I have one question regarding space between sections (see above).

I want to add some space at the bottom of each section, but when I use this code, I didn’t see any space at the bottom.

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

And when I use margin-top: 10px; I have the content part and a widget part not in the same line (like now)
See this link: http://www.betrugonline.net/stockpair-erfahrungen-und-test/

How can I do it right?
Thank you!

[Leo]

Hi Alessia,

Give this CSS a shot:

.separate-containers .site-main>.generate-sections-container {
    margin-bottom: 10px;
}

Let me know.

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

[Alessia]

It’s working! Thank you soo much!!

[Leo]

Glad I could help!

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

[Author]

Posts