How can I convert a mobile collection list carousel into a grid?

[alghoulx]

Hello, 

I use the pipeline theme. I am building a store with a large catalog and many collections. I want a page to be dedicated to a long list of collections. On desktop it looks nice as a grid, but on mobile it is only shown as a carousel which causes visibility issues when there are 100+ collections. How can I change the collection list on mobile to be a grid (for example, to look like a product list grid) instead of a carousel. I could not find settings to do this, so I assume it needs code editing. I want to clarify, NOT product list, but collection list.

Here is the link:

https://furnitureanddecorga.com/

This is urgent.

Thanks in advance!

[Dan-From-Ryviu]

Hi @alghoulx 

It will need to edit theme code to do that so I recommend you contact support of this theme so they can do it for you.

[bss_ta_dev · Accepted solution]

This happened because of responsive config for mobile of this theme. You can try the following step to customize that: 

1. Go to Edit code of theme, find "theme.css" file and the boiled code in this img, then comment it by enter Ctrl+/ 

-> it'll remove responsive css of grid element in mobile

The result will be:

2. After that, you may want to customize font-size of title of collections card because it needs to be small to match with small card in mobile.

Add the following code after the commented code (any font-size you want)

.hero__content__wrapper p {
    font-size: 18px;
}

The result will be like:

P/s: This theme is not free, so I can't directly edit its code to check. If these steps doesn't work, don't mind to tell me

[alghoulx]

Thank you for your help! I will add that I needed to go down a bit more and do the same from row 8701 to 8774. With this addition, it worked perfectly. 

[BSS-Commerce]

Hi @alghoulx ,

This happened because of responsive config for mobile of this theme. You can try the following step to customize that: 

1. Go to Edit code of theme, find "theme.css" file and the boiled code in this img, then comment it by enter Ctrl+/ 

-> it'll remove responsive css of grid element in mobile

The result will be:

2. After that, you may want to customize font size of the title of collections card because it needs to be small to match with a small card in mobile.

Add the following code after the commented code (any font-size you want)

.hero__content__wrapper p {
    font-size: 18px;
}

 The result will be like:

Good luck @alghoulx !