[Resolved] Full width gb – best practice

[Matthias]

Hi there,

i am wondering:
what is the best practive to achieve a full-width grid with generateblocks – with a centered image or text and the sides colored the same – as you can see on this page (but with the sides the same color as the image (so you cant see the transition?
Also the image should be aligned to the layout container – so menu and other pages have the same width. But unlike with post pages etc. the edges of the container should be colored up to full width.

I tried 3-column grid in a container – image in the middle – 20-60-20 (percent), sides empty with coloured background. But this is not aligned to the menu/rest of page. Container size in customizer is 1200.

Any ideas how to solve this best?

[Leo]

Hi there,

Are you referring to the black section?

If so add a container block with outer container set to full and inner container set to contained.

Then add the image in the inner container.

If this doesn’t help, can you link me to the page in question so I can see your set up?

[Matthias]

Yes – to the black section in the first, orange in the second etc. -> the left and right side with image/text in center.

the way you describe it i get it aligned perfectly – i was thinking to complicated i guess with my 3-column grid. Simply select background colour for the whole container and left+right are that colour.

But – this made me face another problem. I needed a headline or similar on that.

I solved that with:
1.add container outer: full width, inner contained
2.add container inside that container: outer + inner full width
– set background image -> the image i want
– set spacing minimum height: my picture heigt.
– and after set the padding as wanted.

Now i am facing a third problem: how to add text in different color / change text color in one headline/paragraph (on top of the background picture in the 2nd container)? (This would be a nice feature in gb (e.g. editors kit makes that possible))

The picture in my url as you can see has a text with 2 colours in it. i would like to add that with wordpress if possible.

My tries so far again is a grid on top of the 2nd container. but not sure if there is a more clever approach.

btw – did i see right that headline also works as paragraph? So it is also a replacement for that?

[Leo]

Can you link me to your current set up?

[Matthias]

i edited the url in the first post.

There i want to achieve with gb what you can see on the main page (url without the sandbox in front).

[Leo]

Sorry is the original question about the full width container resolved?

If so can you mark this one as resolved, open a new topic for the new question so it’s easier for us to track the issue?

[Matthias]

i just found a problem with this i couldnt solve:
the inner container (with the background image) doesn’t seem to resize for tablet and mobile.
It basicaly gets cut.

[Leo]

Can you open a new topic for the new question?

Thanks!

[Author]

Posts