URGENT! I cant change the collections per row to 4 or 5 for desctop

zakuntsart
Tourist
19 0 1

I made some code customization only for mobile devices and now I can't change the amount of rows in desktop and I have these giant images 

 @media only screen and (max-width: 767px) {
.collection-list {
grid-template-columns: 33% 33% 33%;
justify-content: space-around;
} */
}

https://simaxsports.com/

Replies 7 (7)

Zqdo
Shopify Partner
803 32 63

What code customization did you make?

banned
zakuntsart
Tourist
19 0 1
 @media only screen and (max-width: 767px) {
.collection-list {
grid-template-columns: 33% 33% 33%;
justify-content: space-around;
} */
}
Zqdo
Shopify Partner
803 32 63

Just took a look at your website, and the items seem to be 5 in a row now. Are you still facing this issue?

banned

Dan-From-Ryviu
Shopify Partner
7990 1560 1583

Please try to remove */ in your code and check again Screenshot 2023-06-09 at 10.03.54.png

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

zakuntsart
Tourist
19 0 1

does not work 😞

SAN_MSWEB
Shopify Expert
1162 138 145

Hi @zakuntsart 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

@media screen and (min-width: 1000px){

#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(5, minmax(0, 1fr)) !important;}

}

@media screen and (min-width: 700px){

#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(4, minmax(0, 1fr)) !important;}

}

@media screen and (max-width: 699px){

#shopify-section-template--19142777962796__collection-list .collection-list { --collection-list-grid: auto / repeat(2, minmax(0, 1fr)) !important;}

}

 

 

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

zakuntsart
Tourist
19 0 1

almost works, but not all the collections are affected, some of them still have only 3 in row