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.

Horizontal Gap showing background color under page content

  • Hello,

    Attempting to add a design to the page where I have one section in one background color and content in the middle.

    Now sure if I have done this right.

    I am now getting the background color of the website appearing on the bottom horizontally. Can not figure out how to fix this

    My apologies in advance if this was supposed to be posted elsewhere.

    More info added below.

    Thank You

  • Hi there,

    for those kinds of design I would begin like so:

    1. in the page editor settings sidebar set the Content Container to Full Width:

    https://docs.generatepress.com/article/content-container/

    This a) makes the page 100% wide and b) removes the Theme spacing.

    2. Add a Container Block to the page, this will automatically be full width, so there is no need to set its alignment to full width
    2.1 set its Background color
    2.2 set its Spacing > Padding Top & Bottom to 80px or a value that suits your needs.

    3. in the Container Blocks toolbar click the Add Inner Container
    https://docs.generateblocks.com/article/add-inner-container/

    This Container will automatically be centred and have a max width to match the Customizer > Layout > Container Width.

    3.1 set its Spacing > Padding Left & Right to 40px on desktop, 30px Tablet, 20px on Mobile.

    You can now add whatever content you require inside the inner container.

    Then simply duplicate the top container for each section on the page.

  • Hello David thank you so much for replying.

    I did what you suggested but the inner container is not showing at a width of 1200px nor is it in the centre of the page. There is still a white gap between page content and footer on bottom.

    Have added the page link and other info below.

    Thank You

  • I think you may have pressed the wrong button to add the Inner Container.
    Have a look now.

    If you open the List View you will see:

    
    Container Block #1
    ---- Container Block #2
    ---- ---- Paragraph block 
    

    Container Block #1 now has
    Colors > background color set
    Spacing > Padding Top and Bottom padding set to 80px

    Container Block #2 now has
    Colors – i removed the background color
    Sizing > Max Width set to Global Width
    Spacing > Margin Left & Right set to auto
    These last two styles would automatically be added by the Add Inner Container button.

  • Hello David thanks for your help. So if I make the inner container bottom padding 0 the gap of white space (which is background colour) will appear on bottom near footer. And if this is change to 1 for example it disappears.

    Is this correct?

    Thanks Again

  • The extra white gap was coming from the Bottom Margin that the paragraph block has attached to it.
    That margin will escape the bottom of A container block that has NO bottom padding or NO bottom border. Which creates the extra space below the container

  • Thank you so much for your help.

    I really appreciate it.

  • You’re welcome – happy to be of help

  • David can I ask you a question around this please?

    Is there a way to add a custom css that changes the background color of the container per page or is this locked in?

    My thinking was it would be cool to be able to assign different colors to different containers.

    So might have 10 pages with one colored container another 10 with a different one and so on with an ability to change this from one point such as the custom css feature.

    Thanks Again

  • If you wanted to change a color on a page by page basis then you could do something like this:

    1. in Customizer > Colors, create a color that will be used for the default container colour.
    For my example I will call it container-bg with a hex color of #ff0000

    2. edit the Container and set its Background color to your new color.

    Behind the scenes when you created the color in the customizer GP writes the CSS for that variable , which for reference looks like this:

    
    :root {
        --container-bg: #ff0000;
    }
    

    Note that --container-bg is our color name container-bg with a double hyphen prefix -- which is the syntax for CSS Variables ( Custom Properties ).

    The Container Block will be now have a background-colour: var(--container-bg) instead of the color value.

    Which means we can change the value of the variable and update the background.

    3. Go to Appearance > Elements -> Add new -> Hook
    3.1 In the hook editor add:

    
    <style>
    body {
        --container-bg: #ff0000;
    }
    </style>
    

    change the #ff0000 hex color in the style to what you need for your other pages.

    3.2 In the Hook list choose: wp_head
    3.3. Set the Display Rules > Location to the pages you want to change the color.
    3.4 publish the element

    Now on any of those pages your element will swap the color

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