Brooklyn: Collection List - Change Number of Columns 3 to 4 | or Make All Collection Images Same Siz

Store Design
1

Hi everyone, I’m having some issues with my Collection List page (linked below).

Currently the page is showing 3 columns. But the issue comes up when I have a number of collections that aren’t divisible by three. There ends up being rows of two where the images are bigger than the row of three. So I’m either looking to:

  1. Change the number of columns from 3 to 4.

or

  1. Make all the collection images the same size regardless of how many is in one row.

Note: This is for the Collection List page, not the product pages.

Website: https://wewantgoodkarma.com/collections (Password: Wewantgoodkarma)

Thank you!

1 Like
2

@GoodKarmaCo

sorry for any issue please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
.collection-collage__item.large--one-third {
    width: 25%;
}
}
1 Like
3

Thanks Ketan! This created an issue where every column became 4, but the first row remained with two icons by themselves. I decided to edit the code slightly and just have two columns for everything. Thanks again!

1 Like
4

@GoodKarmaCo

great, thanks for your update

5

Hi @GoodKarmaCo and @KetanKumar - I tried to use the code but no budge. Any chance I can get the code to do 2 in a row. At present I only have 4 photos in the one collection and the other two collections have 2. I would like perhaps do 2 one row and another 2 in one row as you mentioned you did. If you could share how that would be awesome.

Thanks :slightly_smiling_face:

1 Like
6

@GoodKarmaCo

yes i can see now 2x2