Archived topic
Spacing issue with the one container layout and GB post loops
11 replies · Started by George on August 22, 2022
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!
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.
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?
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;
}Tried that before, it unsets all paddings altogether even the ones set from the post loop gap.
Where can i see one of the query loops that the Grid Gap is breaking ?
Right sidebar and footer (Best Ecommerce Platforms).
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).
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.
Yes, my solution sets the padding to 0, then you can control them by setting bottom margin.
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!
No problem :)
