How can I correct the size of the product collection? mobile version

[Lorenita]

How can I correct the size of the product collection?

I need to decrease the size of how my products are displayed

mobile version

password: well123

https://welldonecase.cl/collections/los-simpson

Thanks

[Zqdo]

Do you just want to decrease the image size?

Also, do you want this change to be just on the home page, or all throughout the website?

[NomtechSolution]

You can reduce padding of products to decrease its size

[Lorenita]

only in the products collection

[Zqdo]

I’m not sure how small you want the image to be, but type this in your products collection where it says Add Custom CSS:

@media screen and (max-width 991px){
.img-fluid{
transform: scale(0.7);
}
}

You can adjust the 0.7 number as needed until you get the size you need. Does this work?

[PageFly-Richard]

Hi @Lorenita

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

#product-grid {
    margin: 0px;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

[Lorenita]

The images still appear small in the collection. only from mobile

What I want is for it to look a little bigger from the mobile

[Lorenita]

it does not work

[Zqdo]

Are you looking to make the images bigger or smaller?

[Lorenita]

Bigger @Zqdo

[Zqdo]

Replace the other code that I gave you with this one and let me know if it works:

@media screen and (max-width 991px){
.card__media{
transform: scale(1.2;
}

.card__inner{
margin-bottom: 50px;
}
}

[Lorenita]

it does not work