Adjust Collection List on Mobile Layout (Current Theme)

Shopify Discussion
1

Currently I have 3 featured collections displaying on the Current theme. When viewing on mobile it places 2 collections on one line and bumps the 3rd down on a line by itself. How can I make them remain on the same line or at least center the 3rd collection under?

unnamed.jpg
unnamed.jpg1284×2669 178 KB

Also, bonus question - how do I remove the collection name from under the images? I already have it in the image itself and don’t need it repeated.

Thank YOU!

2

Hi @shopninenorth ,

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.

3

Sure!
www.shopninenorth.com

4

Hi @shopninenorth

First, go to Themes → Edit code:

view (33).png
view (33).png1856×986 108 KB

Next, go to the Assets folder → go to the base.css file and add this code at the end of the file:

[data-section-type="collection-list-section"] .grid-uniform{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

[data-section-type="collection-list-section"] .grid-link__title{
  display: none !important;
}

We hope that it will work for you.

5

I do not have a base.css file in the Assets folder.

6

Hi @shopninenorth

For your store, find 2 timber.scss.css files and add the code:

[data-section-type="collection-list-section"] .grid-uniform{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

[data-section-type="collection-list-section"] .grid-link__title{
  display: none !important;
}

Good luck!