"Collection List" 2 per row on phone problem

Store Design
, ,
1

Hello,
I managed to have my “collection list” on the desktop in 8 per row. With this code :

@media screen and (min-width: 1120px) {
.CollectionItem { min-width: 12.5%;}
}

But now I would like to have 2 or 3 per row on the phone.

I use the Prestige theme.
I can’t find the code to solve my problem.

Thanks in advance for your help.

https://10-03-53.com/

2

@baptistefrst ,

@media screen and (max-width: 641px){
.CollectionList--grid {
	margin: 12px;
	display: flex;
	flex-wrap: wrap;
}
.CollectionItem.Carousel__Cell {
	min-width: 50%;
flex: 0 1 0;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

3

Hi @baptistefrst ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add the below CSS in your theme.css file.

@media screen and (max-width: 640px)
.CollectionList--grid {
    margin: 12px;
    display: flex;
    flex-wrap: wrap;
}
.CollectionList--grid .CollectionItem {
    padding: 12px;
    width: 50%;
    max-height: 500px;
}
}

If its working then, please do not forget to accept this solution :slightly_smiling_face:

Thanks & Regards,
Prezen Tech

4

Hi !
Thanks for your answer,

Unfortunately it doesn’t work. It’s the good scale, but there is now a space but not 2 per Row.

Do you know how to fix it ?

Thanks a lot !

IMG_0923.jpg
IMG_0923.jpg750×1334 54 KB

5

Hi @baptistefrst

Look like the above CSS didn’t apply properly.

Please copy below CSS and add in theme.css at the first line.

@media screen and (max-width: 640px)
.CollectionList.CollectionList--grid {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
CollectionList--grid .CollectionItem {
    padding: 12px;
    width: 50%;
    max-height: 500px;
}
}

Please do let me know if its not working.

6

Hi,
Thanks again for your answer,

I copied the code on the first line of theme.css and now there is 1 per row and not in the middle. This is weird !

Do you know how to fix it ?

IMG_0924.PNG
IMG_0924.PNG750×1334 77.6 KB

Also i haven’t mentionned that i don’t have Assets->theme.scss.liquid but only theme.css is it normal ?

Thanks again !

7

I don’t have the section “Assets->theme.scss.liquid” but only theme.css

Is it normal ?

8

@baptistefrst ,

Both are same.