Change image size on collection - Dawn theme

Solved

Change image size on collection - Dawn theme

rorchoz
Tourist
11 0 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

 

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1002 1150

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 6 (6)

LitExtension
Shopify Partner
4860 1002 1150

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
rorchoz
Tourist
11 0 1

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

LitExtension
Shopify Partner
4860 1002 1150

This is an accepted solution.

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
rorchoz
Tourist
11 0 1

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

rorchoz
Tourist
11 0 1

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

LitExtension
Shopify Partner
4860 1002 1150

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify