[Support request] Latest Post Grid is stacking on desktop when it shouldn’t be

[Tommy]

One of my latest post grids is stacking on desktop when all others are not. I have tried removing it and replacing it, duplicating another and changing it, when I do this it works ok as the other grid, but when I change it to display how I want, it stacks them. The difference with this grid to others is that I want this 4-wide, and the others are 3-wide. you can see how the grid above is horizontal as it should be but the ‘Shop Review’ grid is stacked.

Thanks in advance

[David]

Hi there,

how odd, that block is not writing the CSS required for 4 columns.

Try adding this to fix that:

@media (min-width: 600px) {
    .wp-block-latest-posts.columns-4  {
        justify-content: space-between;
    }
    .wp-block-latest-posts.columns-4 li {
        width: calc(25% - 1.25em);
        margin-right: unset;
    }
}

[Tommy]

That’s fixed, it. Thank you! Do you think it could be Ezoic affecting it?

[David]

You may be right.
This: block-library/style.min.css is the core block styles CSS which should contain CSS for several column classes for the latest-posts
Whereas the CSS file on your site does not.

And heres that stylesheets URL

https://bondscenes.com/wp-includes/css/dist/block-library/style.min.css?ver=6.2&ez_used_css_s=112

And see the query string: ?ver=6.2&ez_used_css_s=112 thats what ezoic adds after it has been through their critical CSS optimization. You may just need to regenerated that CSS.

[Tommy]

I thought as much as it can interfere. I have added the CSS and it works, so it should be ok to leave as is?

[David]

There should be a regenerated use CSS option in there plugin, that should fix that.
But if not keeping the CSS i provided is a fine alternative.

Glad to be of help

[Author]

Posts