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

Store Design
, , ,

Topic summary

A user is experiencing issues with desktop collection grid layout after implementing mobile-specific CSS customizations, resulting in oversized images. The problem appears to stem from corrupted or reversed CSS code in their customization.

Key developments:

  • Initial code snippet shows garbled/reversed CSS syntax, suggesting a formatting error
  • One responder identified stray __*/__ characters that need removal
  • Another contributor (San from MS Web Designer) provided targeted CSS fixes for different breakpoints:
    • 5 columns for screens ≥1000px
    • 4 columns for screens ≥700px
    • 2 columns for screens ≤999px

Current status:
The solution partially works but remains incomplete—some collections display correctly while others still show only 3 items per row instead of the intended layout. A follow-up question asks whether the issue persists, suggesting the problem may have been resolved after the CSS fixes were applied.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
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/

2

What code customization did you make?

3

Please try to remove */ in your code and check again

Screenshot 2023-06-09 at 10.03.54.png
Screenshot 2023-06-09 at 10.03.54.png807×199 21.3 KB

4

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

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

does not work :disappointed_face:

7

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

8

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