Collection List Image size and center

Solved
QuinnAndLane
Excursionist
15 0 3

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
Shopify Partner
18896 1984 6992

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
QuinnAndLane
Excursionist
15 0 3

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. 

0 Likes
KetanKumar
Shopify Partner
18896 1984 6992

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 Expert | 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 3

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

0 Likes
KetanKumar
Shopify Partner
18896 1984 6992

@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 Expert | 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 3

Yes like that. How do I do that?

KetanKumar
Shopify Partner
18896 1984 6992

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 Expert | 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 3

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

KetanKumar
Shopify Partner
18896 1984 6992

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes