Archived topic
Best way to colour containers half and half
5 replies · Started by Ema on February 2, 2022
Hello GP Team,
I'm wondering what the best way is to colour the grid/containers half and half, with the colour flush to the edge?
Say, left container white > Right container grey.
I wish the container to be full width - with the inner container 'contained'
However, when I add colour to one half of the container this way, the colour only fills the inner container, rather than flush to the edge.
I would like to achieve something similar to this
Is there a better way to do this, other than setting > main container and inner container set to full-width, then adding padding to bring the content in line with all other sections?
Thanks in advance
E
Hi there,
yeah thats a doozy - theres a few ways to do it. All will require some CSS. Is it possible to see the page you want to apply it to ( ie. the one in the shared image ) ?
"A doozy", haha :-D
I've added the link below.
Thanks for looking, David
E
:)
So one method using your current layout:
1. Select the parent Container Block, and give it a Gradient background with #fffff and #f6f6f4 colors. Set both stop points to 66% - may require a little tweaking.
Great if your using GB Pro to use an Advanced background to add the gradient as you can apply it to just the desktop and tablet if required. If not let us know and we can CSS it out the way
2. Set the left hand column container background to #ffffff.
By having the column backgrounds it should stop the gradient from peaking through on browser resize.
How clever. That just works, and so simple!
Thank you so much again
Ema
Awesome - glad to be of help!
