How can I adjust my Prestige collection list to fit 4 boxes in a row?

[AMOB]

How can I have my collection list, boxes fit 4 in a row instead of being fat.

THE EXAMPLE I WANT>>>>

MINE LOOKS LIKE THIS

[shozoid]

Hello @AMOB ,

Can you share your store’s password so that we can check the issue and provide you the solution?

[AMOB]

pass: shawsu

[KetanKumar]

@AMOB

can you plz share store url also

[AMOB]

Yes @KetanKumar the password is shawsu

[AMOB]

ZOTIC: Cuban Chain〡Gold Jewelry〡Chains and Bracelets | SALE | FREE 🚚|

is my url

[AMOB]

PASSWORD : shawsu

MY WEBSITE IS : Zoticnewyork.com

[KetanKumar]

@AMOB

yes, please show me 4 collection current i can see only 3

[AMOB]

Yes just added it to 4

[KetanKumar]

@AMOB

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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

[AMOB]

Did not work,

I want it to look like this

[KetanKumar]

@AMOB

yes, please confirm this look!

[AMOB]

Yes looks good!

[KetanKumar]

@AMOB

thanks for confirming can you please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 640px) {
.CollectionItem__Wrapper--small {
    height: 200px;
}
.CollectionItem__Content {
    padding: 0px 10px;
}
.features--heading-small .u-h1, .features--heading-small .Rte h1 {
    font-size: 12px;
}
span.CollectionItem__Link.Button {
    padding: 10px;
    letter-spacing: 0.5px;
    font-size: 8px;
    font-weight: bold;
}
}