how to change format of archives/search to be masonry like home/landing page?

Hi

To make the layout of archive pages masonry, add the below code in Additional CSS via Admin Dashboard > Appearance > Customize > Additional CSS.

.archive #primary .site-main {
   display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
 .archive #primary  .site-main .post {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 .archive #primary .site-main .post {
     height: 600px;
 }
 .archive #primary .site-main .post:nth-of-type(2n+1){
    height: 550px;
}
 .archive #primary .site-main .post:nth-of-type(2n){
    height: 620px;
}

Hi, thanks so much for your help!

I followed your instructions but the results were not as intended. The category page lined up in one column only. And the results page did not change at all. I’ve left it that way so you can see the result.

https://wiser.wiki/cat/media/magazines/

cheers

Hi @wiserdaily,

The code should have worked fine. To make the necessary changes, we will have to inspect your site, can you please open a support ticket via this link-https://blossomthemes.com/support-ticket/

Ok. Thank you. Will do.

p.s. I even tried your code in the Blossom Pin Pro theme (in case my customizations were causing conflict). But it was the same result.

cheers

Hi @wiserdaily,

We will like to inform you that we have added this as a feature request and have forwarded it to the development team.

Once the feature is added, we will release a theme update. Make sure to update the theme when it is released.

That’s great news! I’m so glad because that masonry format in Blossom Pin is the best design of all the themes I’ve tested. It really is a beautiful feature that should be available throughout the theme. Wonderful news!