Supply Theme: How To Show 1 Collection Per Row In The Collection List Section On Mobile View

Store Design
1

Supply Theme

https://addibray.com/

password @Braylin1208

Hello,

I have been trying to figure out how to put 1 collection out of the collection list in a row on the mobile version of the Supply theme. Right now it has 3 collections in a row on the desktop (which is what I want) and has the same 3 collections on the mobile but it has 2 in a row and 1 under those. I would like all 3 collections to be in a different row on the mobile version. Like for them to be stacked so to speak. Please someone help me with this! Thanks

1 Like
2

Hi @Cristy1 ,

Can you take a picture of the part you want to edit? I don’t know what part you are talking about and on which page

Thanks you

3

Capture.PNG
Capture.PNG660×549 58.1 KB

This is the mobile. Do you see how it has Dresses, New Arrivals on the same line, and Tops under them? I would like for them to be stacked under each other and not side by side if that makes sense.

4

Hi @Cristy1 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 480px) {
    .collection-list-section .grid-uniform .grid-item {
        width: 100% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

@Cristy1

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media (max-width: 480px) {
.collection-list-section .grid-uniform .grid-item { width: 100%;}
}
6

That WORKED!!! Thank you so much for helping me! I’ve been trying to figure it out for a week now!