Liquid, JavaScript, themes, sales channels
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?
Solved! Go to the solution
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!
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.
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
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!
That's great thanks, i was pasting it into the wrong css file!
This seems to affect mobile too, although in the CSS i cant see a line for mobile to override it.
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024