Change image size on collection - Dawn theme

Technical Q&A
1

The featured collection component in this theme seems to increase the image size if there are fewer items on that row, resulting in quite a messy layout.

How can this be restricted so that each preview image is the same size and dimensions?

rorchoz_0-1649864542081.png
rorchoz_0-1649864542081.png1671×864 318 KB

2

Hi @rorchoz ,

Do you want it to show all 3 products in 1 line?

Please explain more about it and send a link site. I will check it.

3

Hi, i dont mind how many are displayed, it could be 3 or 4 in a row. I just want the remaining items on the next row to display in exactly the same way (so that the whole list is a grid), rather than the ‘card’ layout which it seems to increase the size of the remaining 2 items to fill in all the space. Cheshire Fire logs – Cheshire Fire Logs

4

Hi @rorchoz ,

Go to Assets > component-product-grid.css and paste this at the bottom of the file:

.collection .grid--3-col-tablet .grid__item {
    max-width: calc(33.33% - 1rem * 2 / 3);
}

Hope it helps!

5

That’s great thanks, i was pasting it into the wrong css file!

1 Like
6

This seems to affect mobile too, although in the CSS i cant see a line for mobile to override it.

7

Hi @rorchoz ,

Please change code:

@media screen and (min-width: 750px) {
	.collection .grid--3-col-tablet .grid__item {
		max-width: calc(33.33% - 1rem * 2 / 3);
	}
}

it will only affect desktop, mobile will not change.

Hope it helps!