How can I make single and multiple collection images the same size?

[merkaparts92]

I would like the one that has one collection to have the same size as when there are multiple collection. I have been trying to edit the code but nothing gives me the result that I would like. Please let me know if anyone could help me fix this issue.

[NomtechSolution]

For that you have to change css and set image width to 100% in theme code

[merkaparts92]

Where can I check the css, I am looking in my edit code and I do not have a theme.css under my assets to do the fix.

[made4Uo]

HI @merkaparts92

Please follow the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file
3. At very end of the code, add the code below

@media only screen and (min-width: 950px) {
.collection-list .collection-list__item:only-child {
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}

Result here:

[merkaparts92]

Thank you, that work perfectly!

[geekster]

Hi Made4Uo,

Thank you for the solution. However, this only works for Desktop view. Please may I know how can this be applied to the Mobile view too?