Changing the aspect ratio of the Custom content Collection images

New Member
1 0 0

I am trying to customise my home page which features Custom content Collection images at different widths (33%, 50% etc). The images I have as my collection hero images vary in orientation - some are square and some landscape.

What I'm trying to achieve is that for widescreens I would like for the landscape images to stay landscape so that whole image is showing, not cropped to square.


I know it's something to do with .collection-grid-item or .box or .ratio-container


I changed the CSS like this:


.collection-grid-item__overlay { 
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: contain; // changed from cover - this changed it from sq to landscape
  background-repeat: no-repeat;
  background-position: center top;
  @include media-query($medium-down) { // added this media query
    background-size: cover;


Which now shows the whole image (uncropped), but the container it's in is still set to square so I'm left with a big gap at the bottom of my rectangular images.


Any help would be appreciated!!