How can I customize my CSS collection list for mobile and desktop views?

Store Design
1

Hi i want my collection lists on my homepage to show

MOBILE - 2 rows

DESKTOP - 6 rows

I have added some code in the base.css it seemed to have changed desktop and mobile to 2 rows

WEBSITE - https://sweets-retreat.myshopify.com/

.grid–1-col .grid__item {
width: calc(100% / 6)!important;
max-width: 25% !important;
}

.grid–1-col .grid__item {
width: calc(100% / 2)!important;
max-width: 50% !important;
}

2

Hello.

Please change the code.

.grid--1-col .grid__item {
    width: calc(100% / 6)!important;
    max-width: calc(100% / 6) !important;
}
@media screen and (min-width: 749px) {
    .grid--1-col .grid__item {
       width: 50% !important;
       max-width: 50% !important;
    }
}
3

Hi i have done that and now my mobile is showing 6 and desktop is showing 2 witch should be the other way round

4

I am sorry.

please change to (max-width: 749px)

5 
.grid--1-col .grid__item {
    width: calc(100% / 6)!important;
    max-width: calc(100% / 6) !important;
}
@media screen and (max-width: 749px) {
    .grid--1-col .grid__item {
       width: 50% !important;
       max-width: 50% !important;
    }
}
1 Like
6

your a star cheers do you know how i can change them round instead of square ??

&

how to get rid of the light transparent padding under the pictures where the titles are

collectionss.JPG
collectionss.JPG349×512 39.3 KB

7 
.card--light-border {
    border: none !important;
}
.card-colored.color-background-1 {
    background: none !important;
}
.card-colored .media--square {
    border-radius: 50%;
}
1 Like
8

If you hire me, I will complete your site by great.

9

Cheers Puma your a star i will keep you in mind defiantly

1 Like