Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

2 column section with different background color

  • 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.1 
    

    Container Block #1, #2 and #3
    Set the Layout > Display to Flex

    Container 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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.