How can I adjust the default size of product grid images?

Store Design
, , , ,
1

https://spoiledbrat.co.uk/collections/frankies-bikinis

An example of my collections, the images are a good size, but by default I would like them longer so it doesnt cut off the entire image

Can anyone help as to how I can fix the default size on product grid

We have settings for ‘portrait’ which is the best one for my images (but needs to be longer)

‘adapt to image’ - but doesnt work as all images are different sizes

‘landscape’ and ‘wide’ - neither work with my images

2

Hey Susan,

The fix should be pretty simple.

Here is the rule (from base.css) which defines the aspect ratio of your product card images.

.media--portrait {
  padding-bottom: 125%;
}

You just need to add a rule to override it and make images a bit taller:

.media--portrait {
  padding-bottom: 150%;
}

If your theme allows to enter ‘Custom CSS’ same way Dawn does (in theme settings, I guess), you can add it there.

Otherwise, add it to the bottom of the base.css asset file.