Need help making 6 collumns for mobile version

Store Design
,
1

kastia_0-1745764194196.png
kastia_0-1745764194196.png415×627 41.6 KB

Hello!

i can’t make this page into 6 columns for 6 categories, I want to have 2x2x2 but only sliders work (On mobile version). My site name is Kastia.se

This is how i want it to look: on the mobile version

kastia_5-1745764410756.png
kastia_5-1745764410756.png310×497 44.4 KB

2

Hi @kastia_1

I can custom CSS to display like this for you

Screenshot 2025-04-27 at 22.02.01.png
Screenshot 2025-04-27 at 22.02.01.png542×1624 283 KB

3

yes this would be perfect

4

Let copy the css code below then paste to Custom CSS on your theme editor:

@media screen and (max-width: 749px) {
  .section-collection-list .slider.slider--tablet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .section-collection-list .slider.slider--tablet >.grid__item{
    width: 100%;
    margin: 0;
  }
  .section-collection-list .collection-list .collection-slider-buttons {
    display: none;
  }
}

BiDealDiscount_0-1745766970526.png
BiDealDiscount_0-1745766970526.png1848×958 239 KB

5

Hi! thank you but it did not work

6

it because you have change other slider

7

yea you’re right i played around with the settings, how do i fix it ? ;(

8

Please keep as curent & use this CSS code:

@media screen and (max-width: 749px) {
  .section-collection-list .slider.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    transform: none !important;
  }
  .section-collection-list .slider.swiper-wrapper >.grid__item {
    width: 100%;
    margin: 0;
  }
  .section-collection-list .collection-list .swiper-pagination {
    display: none;
  }
}
9

kastia_0-1745768366579.png
kastia_0-1745768366579.png401×857 73.2 KB

its better now but i get many different categories

10

oh many categories duplicate, right?

if yes, please replace by this code:

@media screen and (max-width: 749px) {
  .section-collection-list .slider.swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    transform: none !important;
  }
  .section-collection-list .slider.swiper-wrapper >.collection-list__item {
    width: 100%;
    margin: 0;
  }
  .section-collection-list .collection-list .swiper-pagination {
    display: none;
  }
  .section-collection-list .slider.swiper-wrapper >.collection-list__item.swiper-slide-duplicate {
    display: none;
  }
}
11

thank you very much