Collections Display *within shopping categories* Image size is variable and I need it to be fixed.

Store Design
1

Hi,

Please help me with Collection display in the SHOPPING categories, the Dawn template seems to render them variable sizes if the multiples are not x 3. I need them to be the same size on every line, taking up one third of the page each.

“Collections” refers to the product display in the shopping categories on the back end of the Shopify ecomm system, rather than the manual “collections” I have created in the “Pages” section of the site to be specific and to be clear. It does seem to be a known issue with the Dawn template looking at previous queries, however none of those code solutions worked for me unfortunately that I can see documented.

Examples can be seen here where there is one product on the final line which is not the same size as the others:

JJESSENTIALS – Julia Jentzsch

or here in the shawls collection

SHAWLS – Julia Jentzsch

Here in the coats collection, you can see what happens where there is just one item in the grid:

COATS – Julia Jentzsch

Here in this collection, you can see how two images resize themselves when there is not 3 items in a row.

HAND-KNITS – Julia Jentzsch

I’d be grateful for any insight into this.

Many Thanks

2

Hi @CatherineEJJ ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
	#product-grid .grid__item {
		max-width: calc(100% / 3) !important;
	}
}

Hope it helps!

3

Thank you! That did the trick perfectly.