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

[DonPseudo]

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

And this is how it should look

Anybody can help?

[suyash1]

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

[dmwwebartisan]

@DonPseudo 

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

Thanks!

[DonPseudo]

@dmwwebartisan @suyash1 

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

www.pseudocollection.de  PW: pawfli

[suyash1]

@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;}
}

[Kinjaldavra · 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;
}
}

[DonPseudo]

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

Naztechs solution is nice