Query loop grid display breaking

  • Limeyard

    (@limeyard)


    3 years, 10 months ago

    My three-column grid display seems to have margins, causing the last column to be squeezed out. I have tried over- and under-sizing it and putting it in various containers, but it always behaves as if it is too wide, causing the third column to be displaced. Curiously, it doesn’t happen for logged-in users.

    What am I missing?

    WP6.0.1 with Blockpress theme.

    • This topic was modified 3 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Sahil Multani

    (@sahilmultani)

    3 years, 10 months ago

    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

    Thread Starter Limeyard

    (@limeyard)

    3 years, 10 months ago

    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

    Thread Starter Limeyard

    (@limeyard)

    3 years, 10 months ago

    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

    Moderator threadi

    (@threadi)

    3 years, 10 months ago

    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.

    Thread Starter Limeyard

    (@limeyard)

    3 years, 10 months ago

    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.

    Moderator threadi

    (@threadi)

    3 years, 10 months ago

    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;
}
}
    Thread Starter Limeyard

    (@limeyard)

    3 years, 10 months ago

    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;
}
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Query loop grid display breaking’ is closed to new replies.

Tags