Archived topic
Latest Post Grid is stacking on desktop when it shouldn't be
5 replies · Started by Tommy on April 10, 2023
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
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;
}
}That's fixed, it. Thank you! Do you think it could be Ezoic affecting it?
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.
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?
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
