How can I adjust the mobile collection list to display 2 rows?

Shopify Discussion
1

Hello,

Can you please help in amending the collection list on the mobile version to 2 rows instead of 1 row

screenshot below ( only 1 row is displayed):

E6B624DE-281F-40EB-8FA2-629A0128CE94.jpeg
E6B624DE-281F-40EB-8FA2-629A0128CE94.jpeg828×866 52.2 KB

2

Hi,

Hope this will help

Please take backup first

  1. Shopify admin > Online Store > Themes > Actionss> Edit Code > Assets > theme.scss.liquid

  2. Find CSS related to the collection list or grid layout

  3. Look for a class or selector that controls the grid layout for the collection list on the mobile version. something like - .collection-list or .grid.

  4. Add the following CSS code within the relevant class or selector:

@media (max-width: 767px) {
.your-class-name {
grid-template-columns: repeat(2, 1fr);
}
}

Replace .your-class-name with the actual class name or selector you found in step 3.

  1. Save > Preview > Publish (If all ok)
3

@User1236 Can you please provide store url, without url how can we see your site?

4

Sure!
https://craftworke.com