Different colorparts in background

inula
(@janetb)

4 years, 11 months ago
Hi,

I would like to make different colorparts in the background of my homepage like here: https://vng.nl/ (please scroll down: blue, pink, grey, aque, green etc.)

I always find my way around with css.
But this is a hard one or maybe impossible without changing the header-, page- and footer.php?

Maybe set the grid-container to 100% and then make my own inside-containers?
Or has anyone a better option?

Greetzzz,
Janet
- This topic was modified 4 years, 11 months ago by inula.

Viewing 7 replies - 1 through 7 (of 7 total)

Leo
(@leohsiang)

4 years, 11 months ago

Hi there,

Yeah each section would need to be in its own <div> and unique classes so you can apply background colors to it.

If you are using Gutenberg editor, you can also give each block a unique class so you can target the CSS to them.

Let me know if this helps 🙂

Thread Starter inula
(@janetb)

4 years, 11 months ago

Hi Leo,

Thanks for your reply.
Just in their own divs doesn’t make the background screenwide 🙂

I’m looking for a simple solution for that.

Theme Author Tom
(@edge22)

4 years, 11 months ago

You would need to use a section block to achieve something like that. A block that allows you to go full width, yet keeps an inner container.

We’re working on our own Section block for GP specifically, but there are many block plugins out there currently with this kind of feature.

Let me know if you need more info 🙂
Thread Starter inula
(@janetb)

4 years, 11 months ago
Ah, thanks Tom.
Now I know what I have to look for.

Here’s my solution.
CSS
```
section{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.rood{background-color:#B5121B; color:#ffffff;}
```
The section in the page:
```
<section class="rood">
<div class="grid-container">
Tekst here
</div>
</section>
```
Thread Starter inula
(@janetb)

4 years, 11 months ago
Hmmmm, with a grid-container of 1200px, I got a little overflow which I could not hide…

So I now use this CSS:
```
section  {
  margin-left: calc(-100vw / 2 + 1216px / 2);
  margin-right: calc(-100vw / 2 + 1216px / 2);
}
```
Thread Starter inula
(@janetb)

4 years, 11 months ago
Best solution is this:
```
body{overflow-x: hidden;}
section {
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}
```
Theme Author Tom
(@edge22)

4 years, 11 months ago

You can achieve full width sections using our Page Builder Container option: https://docs.generatepress.com/article/page-builder-container/

Then you don’t need any CSS to force it outside the default container.

Let me know if that helps or not 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Different colorparts in background’ is closed to new replies.

Tags