categories in query loop

Hi Tibor,

1. The button's link looks right, for example, the travelbutton links to your-domain/category/travel/, it is the category archive page. So have you already fixed this issue?
https://www.screencast.com/t/WPVIjLHUuun1

2. You should NOT use query loop block in this case, but use a block element with 1 container/post as content template. Please watch the video attached below to understand how it works.
https://docs.generatepress.com/article/block-element-content-template/

3. Correct, as the settings will apply to all containers in the query loop block, so there's no individual setting for the last block. Try this CSS:

.page-id-1411 .gb-grid-wrapper.gb-query-loop-wrapper .gb-grid-column:last-child {
    padding-bottom: 0;
}

Hi,

1. Still not working on Blog page. For example, there is only one post with "food" category.
When I click on that button, it should go to food cat.page and show only one post (Peniche food market).
Atm, it shows all the posts...
2, I followed video and replicated it on my staging site. I can see no difference between two versions (query loop &
video version).
Why it should not be query loop, even thou it is in Block element/Content template? (https://ibb.co/tbSzH87)

thanks,
Tibor

Hello there,

Let’s address the structure first.

For the blog/archive pages, you’ll need to use a Content Template - Block Element. By default there’s already a loop of posts in blog/archive pages. Content Templates alter the structure of each post in this loop.

Query loop blocks create a new loop which is not necessary since there’s already a loop of posts in these pages as mentioned.

In your screenshot, it seems that you added a Query Loop Block inside the Content Template. This will result with a loop of posts within a loop of posts - so that’s redundant.

The video in the article shared by Ying shows how to utilize a Content Template without using a Query Loop Block.

Basically, a Content Template is a template for how a single article is displayed in the blog/archive pages.

Kindly fix the Content Template first, then, we’ll see if the issue in #1 will still exist.

Hope this clarifies!

Hi,

thanks for explanation, it makes sense to me now;).

I deleted QLBlock and added Content Template with location in Blog page and All Archives.
Clicking on category button, it shows only posts with selected category now. Great!

I would like to style Blog page a bit.
- add bottom padding bellow pagination? same in Category pages?
- change font, color of pagination, center it on page?
- tablet: 100% width for each post (it is 50%-50% now)?

thanks,
Tibor

Hi there,

for the paging navigation spacing and colors use this CSS:

.paging-navigation {
    padding: 20px 0 40px;
    text-align: center;
    color: #f00;
}
.paging-navigation a {
    color: #0f0;
}
.paging-navigation a:hover {
    color: #00f;
}

2. Do you need the Masonry layout for the blog ?

Hi David,

paging navigation is centered now, colors changed.

Suggested padding did not work. I would like to add padding (or margin?) at the very bottom of the Blog and Category pages (between paging navigation and footer).

Masonry layout: I have it ON in Customizer>Layout>Blog.
Does it make a difference to have it ON or OFF to achieve 100% width for individual post on tablet (Blog and Category pages) ?

thanks,
T

Can you re-add the CSS and clear any caches ?

Masonry uses a script to calculate the width and position of each element. So you can use this CSS to overcome that positoning on smaller devices and make all items 1 column:

@media(max-width: 1024px) {
    .generate-columns-container {
        height: auto !important;
    }

    .generate-columns-container .generate-columns {
        position: static !important;
        left: unset !important;
        top: initial !important;
        width: 100% !important;
    }
}

followed your suggestion and it looks good now!

thanks a lot,

have a great day,

Tibor

You're welcome