-
Hello,
For my “About” page, I’ve created a section with two columns, each having a different background color. The only issue I’m facing is the black spacing on both the left and right sides of these columns. How can I fix this so that the left and right sides of this section match the background color of the columns?
-
Hi there,
You don’t need to wrap the Grid block inside containers. Use the Grid block as the root container and add 280px left padding to the left column and 280px right padding to the right column.
I have created an example on the About page for you to see how it’s constructed.
-
Hello,
I see, but I want the content inside the grid to align with the content inside the other sections on my website, and also I want both columns to have equal height. How can I achieve this?
-
Any updates?
-
Hi there,
apologies, your last reply got lost in the system.
That layout I would build as follows:
Container Block #1 ---- Container Block #2 ( Left ) ---- ---- Container Block #2.1 ---- Container Block #3 ( Right ) ---- ---- Container Block #3.1Container Block #1, #2 and #3
Set the Layout > Display to FlexContainer Block #2 & Container Block #3
Set the Width to 50%.
Add your background colors for the 2 columns.At this point you will have a 2 column grid.
Container Block #2
Set the Layout > Justify Content to Flex End.
This will align its content to the right.Container Block #2.1 & #3.1
Set their Sizing > Width to 100% and Max Width to 600px*
The 600px should be halve the value of content width you want to maintain eg. 1200px. -
Thank you.
I think I’m almost there. I still can’t seem to get the white spacing on the left and right of this section to match the background color of each column. Could you have a look?
-
Create a new draft page.
And in the top bar 3 dot menu choose the Code View
Copy and Paste this HTML into the editor:<!-- wp:generateblocks/container {"uniqueId":"cb2667a1","isDynamic":true,"blockVersion":4,"display":"flex"} --> <!-- wp:generateblocks/container {"uniqueId":"ed981673","backgroundColor":"var(\u002d\u002dbase-2)","isDynamic":true,"blockVersion":4,"display":"flex","justifyContent":"flex-end","sizing":{"width":"50%"},"spacing":{"paddingTop":"80px","paddingLeft":"40px","paddingRight":"40px","paddingBottom":"80px"}} --> <!-- wp:generateblocks/container {"uniqueId":"68cd9746","isDynamic":true,"blockVersion":4,"sizing":{"maxWidth":"700px","width":"100%"}} --> <!-- wp:generateblocks/headline {"uniqueId":"c5a8f7af","blockVersion":3} --> <h2 class="gb-headline gb-headline-c5a8f7af gb-headline-text">Meesters in dakonderhoud</h2> <!-- /wp:generateblocks/headline --> <!-- wp:generateblocks/headline {"uniqueId":"c0c780ef","element":"p","blockVersion":3,"spacing":{"marginBottom":"0px"}} --> <p class="gb-headline gb-headline-c0c780ef gb-headline-text">Wij zijn experts in dakdiensten, van renovatie tot het vervangen van dakpannen, voor een dak dat weer als nieuw is. Bij schade reageren we snel om verdere problemen te voorkomen. Onze dakinspecties sporen problemen vroegtijdig op. Kies ook voor onze dakcoatings voor extra duurzaamheid en bescherming van uw dak.</p> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/container --> <!-- wp:generateblocks/container {"uniqueId":"57a238a0","backgroundColor":"var(\u002d\u002dbase-3)","isDynamic":true,"blockVersion":4,"display":"flex","sizing":{"width":"50%"},"spacing":{"paddingTop":"80px","paddingLeft":"40px","paddingRight":"40px","paddingBottom":"80px"}} --> <!-- wp:generateblocks/container {"uniqueId":"42d66597","isDynamic":true,"blockVersion":4,"sizing":{"width":"100%","maxWidth":"700px"}} --> <!-- wp:generateblocks/headline {"uniqueId":"84bcb41f","blockVersion":3} --> <h2 class="gb-headline gb-headline-84bcb41f gb-headline-text">Dakwerk met passie</h2> <!-- /wp:generateblocks/headline --> <!-- wp:generateblocks/headline {"uniqueId":"6833937c","element":"p","blockVersion":3} --> <p class="gb-headline gb-headline-6833937c gb-headline-text">Bij D.S.V.O. Vastgoedonderhoud is klanttevredenheid onze topprioriteit. Wij hechten veel waarde aan open communicatie en heldere afspraken. Vanaf het eerste contact tot de afronding van het project, streven wij ernaar om uw verwachtingen te overtreffen.</p> <!-- /wp:generateblocks/headline --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/container --> <!-- /wp:generateblocks/container -->Then switch back to the Visual Editor
That will give you the basic layout you require.
-
Hello,
I took a completely different approach. I looked at some demo sites from the GeneratePress Site Library with a similar section to mine. I discovered that they wrapped the main container of the section containing the two split containers with a new container and added a linear gradient background like so:
background-image: linear-gradient(90deg, #HEX 50%, #HEX 50%)to this new container. I also added abackground-colorto both split column containers for when they are stacked below each other on mobile devices. This now gives me the result I was looking for. -
Glad to hear you found a solution!
-
Thank you!
- You must be logged in to reply to this topic.