Hi, in my collections list page where all my website collections show, I want the collections to appear as rows. Right now, there are 3 collections in a row. Then, the 4th collection is coming as one big square. I want the 4th collection to appear small in the second row?
Hi @mi26
You can use this CSS to make it show 4 collections per row
@media screen and (min-width: 990px) {
.grid--3-col-desktop .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 2) !important;
}
}
Please follow these steps to apply the CSS
- From your Shopify admin dashboard
- Navigate to Online stores > Themes > Select the main theme
- Click on Actions > Edit code
- From the code editor, search for the base.css file
- Then paste the above CSS at the bottom of the base.css file
- Save and refresh the pages so check your changes
Cheers!
Hi, I want to have 3 per row, but because I only have 4 collections; it should be 3 in the first row and 1 in the second row. The second row should be the same as the size of the first row collections. And every time I add a collection it should continue to add in the same size. Can please help with this?