-
Hi,
I would like to achieve the layout in the screenshot, which I did, but it’s not working exactly how I want to.
So, like you see, there’s two “bigger” post at the top of the page and below, there’s a grid of 3 column of posts (with an offset of two posts).
Right now, I have 2 query loop blocks. One query loop for the two bigger posts and a second query loop for the posts grid below it.
The problem is: I have a pagination at the end of the page, which belong to posts grid query loop. If I go to the second page, it show me the rest of the post, but the two bigger posts don’t change, because it’s not the same query loop.
What I want: Have the pagination work with this layout. Have the two bigger posts change with the page selected.
I think that using two query loops is not the right approach, because there’s two pagination. But I don’t know how to have this layout with only one query loop?
Thank you in advance!
-
Hi there,
the simples solution would be to use 1 Query Loop with the 3 columns set.
And then if you can share a URL to where i can see it, ill provide some CSS to make the top row show just 2 posts wide. -
Okay, sounds good!
I’ll let you the URL in the private note 🙂 Thank you David!
-
Try:
1. edit the Query Loop block, inside it is a Grid Block – select that.
2. in the grid block settings sidebar Advanced > Additional CSS Class(es) add:has-2c-top-row
3. Save that change
4. Add this CSS to the site:@media(min-width: 1024px) { .has-2c-top-row > .gb-query-loop-item:is(:nth-child(1), :nth-child(2)) { width: 50%; } }Note, it does mean there will always be a 2 post row for all pagination, but they won’t be the old posts 🙂
-
It worked as wanted! Thank’s David!
-
Glad to hear that!
- You must be logged in to reply to this topic.