Using the Symmetry Theme, we were able to add more “collections to a row” via coding on the backend, but now the image sizes are all wonky. We’re wanting to make each collection image smaller, have more per row and not take up the full screen.
When the “Collections Per Row” increased, it looks as though the size of the icon is correlated to the length of the collection title. For example, “Baylor Bears” is smaller than “Illinois Fighting Illini” because there’s less copy.
How do we fix this?
Hi @Artsman ,
This is David at SalesHunterThemes.
I can help you edit image size with some custom code.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
David | SalesHunterThemes team
Hi @Artsman
Thank you for your question.
Follow this path:
Themes => edit code => asset => style.css
and add this code to bottom of the file style.css
.template-list-collections .collection-listing .product-block {
padding: 0;
width: 100%!important;
}
.template-list-collections .product-list--per-row-mob-2 {
display: grid;
grid-template-columns: repeat(2,1fr);
column-gap: 20px;
}
@media(min-width: 1200px) {
.template-list-collections .product-list--per-row-8 {
grid-template-columns: repeat(8,1fr);
}
}
@media(min-width: 768px) {
.template-list-collections .product-list--per-row-8 {
grid-template-columns: repeat(3,1fr);
column-gap: 30px;
}
}
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
David | SalesHunterThemes team
Only would allow 3 images per row when set to 8 and the images were giant. It also made the collections list all wonky