How to display 2 columns on mobile in collection list

Store Design
, ,

Topic summary

A user encountered an issue where their collection list displayed only 1 column on mobile despite setting it to 2 columns. After initial troubleshooting confirmed the problem, a solution was provided involving custom CSS code.

Solution provided:

  • Navigate to Actions > Edit code > Assets > list-collections.css
  • Add CSS code at the bottom targeting the grid layout for mobile viewports (max-width: 767px)
  • The code forces a 2-column grid template using grid-template-columns: repeat(2, minmax(0, 1fr)) !important

Outcome:
The issue was successfully resolved. The user confirmed the fix worked after implementing the CSS modification.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I set the number of columns on mobile to 2. But it displays 1 column on mobile view. How to solve this issue?

Actual:

Screenshot 2024-08-25 at 19.30.09.png
Screenshot 2024-08-25 at 19.30.09.png1262×761 135 KB

Expectation:

Screenshot 2024-08-25 at 19.38.09.png
Screenshot 2024-08-25 at 19.38.09.png349×694 250 KB

1 Like
2

Hello @Angel_W
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

Website: Ancosti Official Site
You can see it on the homepage.

Thank you.
This is the screenshot of the desktop view.

Screenshot 2024-08-25 at 20.57.17.png
Screenshot 2024-08-25 at 20.57.17.png1886×848 355 KB

4

Hi @Angel_W ,

I checked and it shows 2 columns, can you check it again?

Screenshot.png
Screenshot.png742×1036 501 KB

5

I modified. Please refresh the page.

6

Hi @Angel_W ,

Please go to Actions > Edit code > Assets > list-collections.css file and paste this at the bottom of the file:

@media only screen and (max-width: 767px) {
.collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
1 Like
7

Thank you very much!

8

Hi @Angel_W ,

If you have any questions, you can contact me directly.
Nice to meet you :blush: