Archived topic
How to reduce gap between post in the querry loop?
9 replies · Started by Dev on June 27, 2022
Hello,
Please check the below screenshot link. And I have added the page URL in the private box.
You will find the GBP query loop box in the righthand sidebar at the bottom.
Please let me know how I can reduce that gap/space between the posts.
Hello there,
There seems to be CSS coming from a third party plugin causing the spacing.
Specifically, I believe it’s called Thrive.
The other spacing is padding added to the Blog Page by default if the Container Layout is set to One Container.
One thing you could do is to add this custom CSS in Appearance > Customize > Additional CSS:
body.blog .gb-grid-column.gb-query-loop-item.post:not(:last-of-type) {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
Kindly modify the values to your preference.
Hope this helps!
Hello,
I added the above CSS code, but then also the issue is there.
Please let me know.
You added it inside a @media query. Can you try adding it outside the last } in you Additional CSS?
Kindly let us know how it goes.
Hello,
Okay I did that again, but still issue is the same.
Can u please send the screenshot that what and where exactly I have to place that CSS in the customizer?
Please tell me with a screenshot.
It’s still inside the media query. I'm only seeing the code from my end. I can't see how it looks in the customizer.
Can you try adding it after:
/* End GeneratePress Site CSS */
If that doesn’t work, kindly let us know.
Hello,
It almost worked fine after adding the code below the End GeneratePress Site CSS.
But there is a gap/space in the last post. See the screenshot below. And let me know.
I see. Try replacing the current code with this one:
body.blog .gb-grid-column.gb-query-loop-item.post {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
Kindly let us know how it goes.
Hello,
Okay now it is fine thank you soo much.
You’re welcome! Glad that worked!