Masonry Layout For Search Results Xtheme Pro

Right now my search results page is displaying in one column with a sidebar. How do you make the search results page masonry like with a blog page? My blog page is masonry with 2 columns right now and I like the way it looks. I tried adding this CSS below that I found in another thread, but it created the screenshot below. I tried adjusting the padding and width to fill the gaps, but it creates big gaps between rows if content lengths are different on the display items. Masonry layout would fix this as the gaps per row are all the same. I also put below the layout I like from my masonry blog page.

.search.search-results article {
width: 33.2%;
display: inline-block;
vertical-align: top;
padding: 30px;
}

Layout I am trying to achieve with search results:

Hello @jsnewton,

Thanks for reaching out. :slight_smile:

Please take a look at the solution mentioned in following thread:

Thanks.

Thanks for the reference. I tried to use the css but it cut off the top of column 2. It was exactly what I was looking for beside the issue with the top of column 2 being cut off. Thanks for your time

You’re most welcome! Have you changed it back to the standard layout, seems the masonry is no longer active. I couldn’t confirm the clipping issue on the upper columns. Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.