Collection List Image size and center

Solved
QuinnAndLane
Excursionist
15 0 4

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?

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
32500 3268 10837

This is an 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%;
}
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 16 (16)
KetanKumar
Shopify Partner
32500 3268 10837

@QuinnAndLane 

sorry for this issue 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
QuinnAndLane
Excursionist
15 0 4

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
Shopify Partner
32500 3268 10837

do you mean like this?

KetanKumar_0-1619181912995.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
QuinnAndLane
Excursionist
15 0 4

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.

 

6B9FB891-7C6C-4B0A-9481-85CCFE992872.jpeg

KetanKumar
Shopify Partner
32500 3268 10837

@QuinnAndLane 

KetanKumar_0-1619201459734.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
QuinnAndLane
Excursionist
15 0 4

Yes like that. How do I do that?

KetanKumar
Shopify Partner
32500 3268 10837

This is an 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%;
}
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
QuinnAndLane
Excursionist
15 0 4

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

KetanKumar
Shopify Partner
32500 3268 10837

@QuinnAndLane 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TheGiftingLady
Tourist
8 0 1

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
Shopify Partner
32500 3268 10837

@TheGiftingLady 

sorry for any issue can you please show me where it 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Seal
Tourist
7 0 3

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
Shopify Partner
32500 3268 10837

@Seal 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Seal
Tourist
7 0 3

https://www.sealmedical.com/

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

 

KetanKumar
Shopify Partner
32500 3268 10837

@Seal 

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

i have see multicolumn section only 3 block 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Seal
Tourist
7 0 3

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