Craft theme collection pictures

[Amiwithani]

I am creating my site using the Craft theme and want to change the size my collection photos. The default crops the picture and cuts off important information when the user chooses Collections in mobile and desktop version. It looks as though it switches to portrait mode and I need landscape with customization. Is there a way to change this? Thank you!

[Amiwithani]

The problem is that I need it to have different dimensions in different locations. The current dimensions work in one section, but not on collections page on site. 

[namphan]

Hi @Amiwithani,

Please send the website link, I will check it for you

[tim]

Have you tried to play with this setting -- "Image ratio"?

[Amiwithani]

Yes, thank you. Unfortunately, there is not a landscape option. I appreciate your help.

[tim]

Ok, we can fix it with code then.

Set the setting to "Square" and then paste this into "Custom CSS" setting at the bottom of the section settings:

.card, .card__inner.ratio {
  --ratio-percent: 55% !important;
}

You can change percentage value to your liking.

If some of your images are taller, they will be cropped. If you would prefer to rather scale them down to fit, add this code too:

.card__media .media img {
  object-fit: contain;
}

the benefit of using 'Custom CSS' is that this will be limited to this particular section only and you will be able to use different settings/percentages for different sections.

And it would not negatively affect your theme updates.