Query loop grid display breaking

Hey @limeyard,

Please update your CSS according to the below :-

.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3>li {
    width: calc(33.33333% - 16px);
}
.entry-content ul {
    list-style: square;
    padding: 0;
    margin-bottom: 30px;
}

Also, review the below screenshots for more clarification.

https://prnt.sc/3kQj3KGsfldv, https://prnt.sc/x8ojpaIW8Iw4

Thanks,
Sahil

Hi Sahil,

I am truly grateful to you for that. Thank you.

But I am curious. Where did the extra pixels come from? Surely not from core WordPress? The post grid is not very new, and I would have thought that an issue of that kind would have been dealt with by now?

Regards,
Bryan Smith

Hi Sahil,

I have just logged out from working on the website and noticed that the problem – or at least part of it – persists. The left side of the grid now aligns correctly but the right column is still displaced.

I must have been looking at it while still logged in after popping in the CSS.

Regards,
Bryan Smith

The site looks fine to me. The assumption would be that you have not yet reset the cache of your cache plugin Litespeed. This has happened in the meantime, probably automatically.

Hi @threadi,
Thanks for the response. You are probably right about that – I have done quite a few things and caching can and does complicate things, so it’s not easy to know.

However, I have just noticed that my query loop grid layout is now failing to stack on mobile. I have tried a few things but to no avail.

Suggestions would be much appreciated.

Add this in Customizer > Additional CSS:

@media(max-width: 640px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
  width: auto;
}
}

Thanks for the css but nothing has changed. I added the code to that suggested by Sahil above. I have cleared LS cache and Cloudflare on the server. This is all the custom CSS:

.fr-position-sticky {
	position: relative;
  z-index: 999;
}		

.feed {
color: #000000;
}

.wp-block-post-template.is-flex-container.is-flex-container.columns-3>li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3>li {
    width: calc(33.33333% - 16px);
}
.entry-content ul {
    list-style: square;
    padding: 0;
    margin-bottom: 30px;
}

@media(max-width: 640px) {
.wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li, .wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
  width: auto;
}
}