How do I make the images in the grid all the same size in Supply Theme?

Store Design
,
1

My collection page shows the images all in different sizes in the grid. How do I get them all to align evenly across the page?

LynnieHHHY_0-1668807657000.png
LynnieHHHY_0-1668807657000.png1920×1080 297 KB

2

Hi @LynnieHHHY ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.collection-list-section .featured-box--image .lazyload__image-wrapper {
	max-width: none !important;
}
.collection-list-section .featured-box--image .lazyload__image-wrapper >div {
	padding-top: 100% !important;
}

Hope it helps!

3

They are still uneven sizes - perhaps my images are not consistent in size.

4

Hi @LynnieHHHY ,

Please change code:

.featured-box--image .lazyload__image-wrapper {
	max-width: none !important;
}
.featured-box--image .lazyload__image-wrapper >div {
	padding-top: 100% !important;
}
.featured-box--image .lazyload__image-wrapper img {
	    height: 100% !important;
    width: auto !important;
    left: 0;
    right: 0;
}

Hope it helps!