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

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

Hello @AMOB ,

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

pass: shawsu

1 Like

@AMOB

can you plz share store url also

1 Like

Yes @KetanKumar the password is shawsu

is my url

PASSWORD : shawsu

MY WEBSITE IS : Zoticnewyork.com

1 Like

@AMOB

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

1 Like

Yes just added it to 4

1 Like

@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%;
}
}
1 Like

Did not work,

I want it to look like this

1 Like

@AMOB

yes, please confirm this look!

1 Like

Yes looks good!

1 Like

@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;
}
}
1 Like