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

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 64

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 64

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
10886 2144 2282

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

zakuntsart
Tourist
19 0 1

does not work 😞

INA_MSWEB
Shopify Partner
1281 144 167

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