Want to change collection list horizontal scroll to grid on mobile

Technical Q&A
,
1

I am trying to figure out how to change the default mobile horizontal carousel (when viewing the featured collection) to a grid when viewing on mobile.

Example: https://revel-girl.myshopify.com/

PW: revelgirl

2

Hi @hellorisingtide

Please follow these steps:

  • Step 1: On the admin page, Online store → Edit code → theme.css

  • Step 2: Add this code at the bottom

@media only screen and (max-width: 768px) {
  div[data-section-type="featured-collection"] .grid-overflow-wrapper {
   text-align: center
}
div[data-section-type="featured-collection"] .grid-overflow-wrapper .grid.grid--uniform {
  white-space: unset!important;
    display: block!important;
  
}
}
  • Step 3: Enjoy!

I hope that it will work for you.

3

Hello! Sorry for hijacking this thread. I’m facing the same problem and spent around 2 hours trying to find a solution yesterday. Yours was the only one I had that kinda worked. The problem I’m facing is that the products are not aligned when I add this code.

Any idea how to fix that issue? I did achieve my goal to remove the scroll option from the mobile collection grid and turn it into a grid that showcases 2 products in each row, only problem is the alignment.

4

Hi @TwinkleSupport

We’re happy to check it for you. Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.