Format Search Results Page

[floify]

Hey Themeco Team,

Can you suggest a way for us to format the search results to a masonry style layout? We found some older posts about this question, but the code you provided then doesn’t seem to work with the newest version of X.

Appreciate any help you can provide.

Thank you!

[Prasant]

Hello Robert,

Thanks for asking.

Masonry layout is also not a feature of the Search result page. The theme only outputs the Standard layout. So, it will require some bit of customization which falls outside the scope of support we can offer.

Having said that, you can use following CSS under X > Theme Options > CSS to get started:

.search-results article {
    margin-right: 2%;
    border: 1px solid #eaeaea;
    padding: 20px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}
.search-results .x-main {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

Please note that above code has been shared to help you get started. Providing support in case of any issue will fall outside the scope of support we can offer.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[floify]

Thank you!

[basanta]

You are most welcome!