Change search page layout

[asiostudio]

Hello,
My search page has the featured images full screen on the page. I would like to have it in a masonry layout instead. I have changed the Archive settings in the Theme Options page with no success.

I will include site details in a private message.

Thank you
Dylan Fleming

[nabeel]

Hi there,

Thanks for writing in! You can do it with custom CSS, try adding the following code in the Theme Options > CSS:

.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;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!