Reducing the Size of Collection List Product Images

[umrraz90]

Hello everyone,

I’m encountering a problem with the size of the collection list product images on my Shopify store. Currently, when only one collection is displayed, the image box appears excessively large on desktop view (see screenshot below). However, when there are two collections, the box size adjusts to a more appropriate size (see second screenshot below).

I kindly had some custom code implemented by a developer which I really appreciate and not sure if this has affected it but I’d like to revert to the default Shopify image size for the collection list. I have tried reverting to a previous version of the code, but the issue still persists.

I’d like to have the image box size consistent with the smaller size used when there are multiple collections, even if only one collection is shown.

Can anyone guide me on how to reset the collection list image size to the default Shopify dimensions, or suggest any solutions to make the image box size more consistent?

https://www.theflowerstudiobyroo.co.uk/collections 

[Moeed · Accepted solution]

Hey @umrraz90 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.collection-list__item:only-child {
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing)* 2 / 3);
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing)* 2 / 3);
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[umrraz90]

Hi Moeed, 

Thank you that’s made it smaller for desktop, is there anyway the size of the collection image can be the same size as the product images on this page at all? 

 https://www.theflowerstudiobyroo.co.uk/collections/all

[umrraz90]

Hi Moeed,

thanks for your help, I would like the collection list image boxes to match the size of the product image boxes on mobile devices, even when only one collection is displayed.

the size I want the collection image boxes 
https://www.theflowerstudiobyroo.co.uk/collections/pre-made-collection

please could you help with this?