Archived topic
Display posts in masonry grid pushes the content on one narrow column
5 replies · Started by Dorin on February 16, 2022
Hi,
Looked for an answer on the forum, disabled all the plugins, played with the blog layout options, tried almost anything, but no luck so far. When I select Display posts in masonry grid option, it pushes all the content on one very narrow column. It looks fine with the masonry option disabled. Any help is greatly appreciated.
Hi Dorin,
One of your custom CSS is messing w/ the grid. :)
It's this one particular CSS that's causing the issue. -
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}You may have to change the selector to body:not(.blog)
Hi Elvin,
Thanks so much for the quick reply. The width of the column is now as it should be (33% since I selected Display posts in 3 columns), but the whole content is still displayed on one column instead of 3.
It's because of this CSS:
.separate-containers .site-main>.generate-columns-container {
padding: 100px 70px 0 70px;
}If you wish to keep the padding, you may have to apply the padding on .generate-columns-container's parent element.
Elvin, thanks for pointing that out.
Solved it by replacing with the code below:
.archive.separate-containers .site-content,
.blog.separate-containers .site-content {
padding: x x x x;
}Great support as always.
No problem. Glad you got it sorted. :D
Let us know if you need further help. :)
