[Resolved] Spacing issue with the one container layout and GB post loops

Home Forums Support [Resolved] Spacing issue with the one container layout and GB post loops

Home Forums Support Spacing issue with the one container layout and GB post loops

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2320573
    George

    I hope you can help with this as it keeps causing me hell! At least, an easy CSS fix would be nice. Whenever I use one container layout, I always have spacing issues when post loops are being used throughout the page.

    For example, the link I provide. The site uses one container. The sidebar’s post loop has a vertical gap of 30px. The post loop at the footer (Best Ecommerce Platforms) has a vertical gap of 15px. Yet when the page is viewed, all post loops inherit the site container’s paddings (60px). Even the blog’s content template doesn’t display the 40px separating space instead, it adds another 60px. It’s a nightmare.

    Separate containers with 0 separating space that fixes the issue, are also a nightmare to work with as it messes up spacing in the content template.

    It’s my biggest GP headache thus far!

    #2320632
    Ying
    Staff
    Customer Support

    Hi George,

    It’s certainly an issue that needs to be fixed.

    For now, can you try adding this CSS:

    .one-container.archive .gb-query-loop-item.post:not(:last-child), .one-container.blog .gb-query-loop-item.post:not(:last-child) {
        padding-bottom: 0;
    }

    Then use margin-bottom instead of padding-bottom to control the gap between the query loop block’s posts.

    #2321159
    George

    That’s the problem, I am not using any padding-bottom to control the gap, only the grid Vertical Gap so that the gap is removed for the bottom items. Plus, the blog spacing values from the content template are still not correct. The problem is the post class being added to both the content template and the post loops. Maybe a filter to remove the class?

    #2321202
    David
    Staff
    Customer Support

    Hi George,

    you can try this CSS so the GP Content Template and GB Query Loops don’t attract the extra padding:

    .one-container.blog :is(.gb-query-loop-item, .site-main .dynamic-content-template ) {
        padding-bottom: unset;
    }
    #2321251
    George

    Tried that before, it unsets all paddings altogether even the ones set from the post loop gap.

    #2321493
    David
    Staff
    Customer Support

    Where can i see one of the query loops that the Grid Gap is breaking ?

    #2321551
    George

    Right sidebar and footer (Best Ecommerce Platforms).

    #2321594
    Ying
    Staff
    Customer Support

    That’s the problem, I am not using any padding-bottom to control the gap, only the grid Vertical Gap so that the gap is removed for the bottom items. Plus, the blog spacing values from the content template are still not correct. The problem is the post class being added to both the content template and the post loops. Maybe a filter to remove the class?

    I tested my solution from here and it worked:https://generatepress.com/forums/topic/spacing-issue-with-the-one-container-layout-and-gb-post-loops/#post-2320632

    It’s a temp solution, but can you give it a try? So set the vertical gap to 0 (anyway it’s not gonna work), then add bottom margin to the post template (container block).

    #2321737
    George

    Hey Ying, I don’t get it, your solution zeroes out the right sidebar and footer post loop paddings as well. The content template works fine, though.

    #2321748
    Ying
    Staff
    Customer Support

    Yes, my solution sets the padding to 0, then you can control them by setting bottom margin.

    #2322297
    George

    I decided to go with separate containers. Even though that was still a headache since I had to modify some sidebar margins and used some CSS, at least I didn’t have to reset post loop gaps all over the site.

    Ying, appreciate your time, thank you!

    #2322632
    Ying
    Staff
    Customer Support

    No problem 🙂

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