Subset of page.list-collection image size and spacing probs

Solved
DonPseudo
Tourist
10 0 4

Hello community,

I did some subsets like that

https://shopify.dev/tutorials/feature-a-subset-of-collections-on-a-page

but the collection images are shown cutted and not in same size.

I created them all in 600 x 600.

 

This is what it looks like

Vintage Classic Test – Pseudo Collection - Google .png

 

And this is how it should look

Subcategory-Classic-Wish.png

Anybody can help?

suyash1
Shopify Partner
2884 308 476

@DonPseudo - can you please share your website page link?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
dmwwebartisan
Shopify Partner
6550 1521 1990

@DonPseudo 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
DonPseudo
Tourist
10 0 4

@dmwwebartisan @suyash1 

Thank you! Shop is still closed, until all (most) is fine

www.pseudocollection.de  PW: pawfli

0 Likes
suyash1
Shopify Partner
2884 308 476

@DonPseudo - add this css to the very end of theme.scss file and check, adjust numbers as per the need 

@media only screen and (min-width: 750px){
.collection-grid .collection-grid__item {height: 300px; padding: 0 20px; padding-left:20px;}
}

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Natztech
Shopify Partner
880 239 644

This is an accepted solution.

hello @DonPseudo 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 999px){
.template-page .collection-grid .grid__item  .collection-grid__link-overlay {
    background-size: contain !important;
}
.template-page  .collection-grid{
    display: block;
    width: 100%;
}
.template-page  .collection-grid .grid__item{
    width: 33.33%;
    float: left;
    padding: 12px 12px;
}
.template-page  .collection-grid__item {
    height: 420px !important;
}
.template-page  .page-width{
    max-width: 1200px !important;
    margin: 0 auto;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
DonPseudo
Tourist
10 0 4

@suyash1 and @Natztech you are great, THANK YOU!

Naztechs solution is nice

 

Vintage Kassette – Pseudo Collection - Google Chro.png

 

 

0 Likes