How to stop image from being cut off in collection list?

smef
Excursionist
20 0 4

Hey! I want to stop my image from being cut off as you can see here:

smef_0-1637381006174.png

I also would like to remove the very faint outline that surrounds the image. I've done this for my main page in the base.css file, but for some reason it's not working on the list collection page. I am using the Dawn base theme.

 

You can find the issue on https://www.razz.blue/products. It's really bothering me, so if anyone could take the time out of their day to help out, it would be much appreciated!

Replies 6 (6)

JHKCreate
Shopify Expert
3571 639 916

Hi @smef 


Would you mind sharing your store's password so we can see the link you've shared? Alternatively you can share a preview link if you don't want to change the store's password later on.

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
smef
Excursionist
20 0 4

The password is "boner"

Charline1
Excursionist
14 0 5

Hi @smef,

 

Have you solved this issue?

 

I have the same issue like this in Dawn, I want to show the featured brands in the collection list, but most of the brand logo images are just cut off! I have tried to look up solutions but this is the only post I can find. Really hope yours have bee solved. If you have, could you please share what the solution is, many thanks in advance!!!

 

Charline

smef
Excursionist
20 0 4

@LitExtension resolved it for me.

smef_0-1638306529994.png

Please thank him.

Charline1
Excursionist
14 0 5

Thanks @smef 

 

I didn't get much luck on the code, I tried it but didn't actually solve my issue, so I had to do the traditional way, i.e. added a background layer at the back of the image, cropped and resized it in the way the system would accept, took a bit time but at least now the images in the collection list are not cut off.

smef
Excursionist
20 0 4

Here is LitExtension's code:

 

.collection-list__item .card{ border: none !important; } .collection-list__item:only-child .media{ height: 0 !important; }