Images in featured collection not same size

[herrabyte]

Good morning Shopifiers!

I have an issue with my website, which uses the ‘Debut’ theme.

When I add a featured collection, I cannot choose to have the images in 1:1 sizes. What I am thinking is if there is some CSS code that needs to be added to do it. I have tried multiple codes I found here and have made myself, but I am still looking for a fix. Does anybody know how to make this happen?

I will attach an image of how it is right now, and hopefully, you understand what I mean.

[Dan-From-Ryviu]

Hi @herrabyte did you go to your store admin > Sale channels > Online store > Theme > Customize > click dropdown menu at the top > Collections > Default collections > Product grid > Image ratio

[NomtechSolution]

Use this code

.grid__item.grid-product {
  position: relative;
  padding-bottom: 100%;
}

.grid-view-item__image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.grid-view-item__image {
  width: 100%;
  height: auto;
}

[herrabyte]

For some reason this just hides the images. Can’t see them using this code.

[herrabyte]

This seems to not be in the ‘Debut’ theme.

[Dan-From-Ryviu]

Please add this code at the bottom of your theme.css file

.grid-view-item__image-wrapper {
height: 250px;
}
.grid-view-item__image-wrapper .grid-view-item__image {
height: 100%;
}

[herrabyte]

Great, works, thank you!

[Dan-From-Ryviu]

Happy I could help