Collection List Image size and center

[QuinnAndLane]

I am using minimal theme (www.quinnandlane.com) and I want to make all my collection list images on the main page the SAME size whether I have 4 across or 3 across. So I like th size of 4 across but when I only have 3 across the images go bigger. I would like them to be the same size as 4 across. I know I can edit one-third to one-quarter to change the size here: 

{% when 3 %}
{%- assign collection_item_width = 'medium-down--one-half one-third' -%}
{%- assign collection_width = 410 -%}
{% when 4 %}
{%- assign collection_item_width = 'medium-down--one-half one-quarter' -%}

...But then the 3 across are left aligned. I would like them to be centered. 

Thoughts?

[KetanKumar]

@QuinnAndLane 

sorry for this issue 

can you please provide further issue screenshot or show me section so i will guide you

[QuinnAndLane]

If you view my homepage you will see collection lists. Some are 4 across. Which I like. Some are 3 across (and the images are bigger). I’d like the 3 across to be the same thumbnail size as the 4 across so its uniform (which I can easily do by editing the code I posted above). However it left aligns then when I do that. I want them centered to the page. 

[KetanKumar]

do you mean like this?

[QuinnAndLane]

No. Not on the product list pages. But on the main page where I have collection lists. Because I only have 11 collections to show here (two rows of 4 and one row of 3) i’d like to be able to have the row of 3 be the same size as the images in the row of four (image wise) but centered. Would not be a problem if I had 12  Collections to show cause then it would be three rows of four. But I don’t. So I want to bottom three to show as the same size as the thumbnails on the row of four and I can do that by editing the above code I spoke about, however it ends up left lining the three collections and I would prefer them to be centered like you showed me in the picture.

 

[KetanKumar]

@QuinnAndLane 

[QuinnAndLane]

Yes like that. How do I do that?

[KetanKumar · Accepted solution]

@QuinnAndLane 

thanks for confirm

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-1619121376d9e13547 {
padding-top: 0;
.grid-uniform {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media screen and (min-width: 769px) {
 .one-third {
    width: 25%;
}
}
}

[QuinnAndLane]

Can you explain to me how to do that for all collection lists on my main page? 

[KetanKumar]

@QuinnAndLane 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[TheGiftingLady]

I'm having the same issue. is there any way to center the collection images or make more images per collection?

my site is thegiftinglady.myshopify.com

[KetanKumar]

@TheGiftingLady 

sorry for any issue can you please show me where it 

[Seal]

Hello,

I am in DAWN theme, hoping to achieve the same - for collections to be listed the same size as if there were 4 in a row, even when there is only one in the row.
However I cannot find /theme.scss.liquid-> in my assets.

Please advise.

And thank you for lots of solutions in other posts @KetanKumar 

[KetanKumar]

@Seal 

can you please share store url

[Seal]

https://www.sealmedical.com/

why do you need this as it is only on standard Dawn theme please?

[KetanKumar]

@Seal 

sorry i can't see collection list at home page now 

i have see multicolumn section only 3 block 

[Seal]

Hello, it is this page that currently shows the giant collection list blocks. 
I would like these to be the same size as if there were four in the row, throughout all collection list pages on the website, even if only 1 collection list block is in the row i would like it to remain the same size as if there were four in the row.

https://www.sealmedical.com/pages/oto-opthal-accessories

Thank you for your time