FROM CACHE - en_header

Change image size on collection - Dawn theme

Solved
rorchoz
Tourist
7 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)

Accepted Solutions
LitExtension
Shopify Partner
4366 887 922

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

Replies 6 (6)
LitExtension
Shopify Partner
4366 887 922

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
rorchoz
Tourist
7 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
4366 887 922

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
rorchoz
Tourist
7 0 1

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

rorchoz
Tourist
7 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
4366 887 922

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!