Can't make collection list items smaller past a certain amount

Store Design
, ,
1

Hey,

I can’t seem to reduce the sizing of the collection slider I created past a certain value. Can someone please look into it and help?

Ideally the “circles” would be about half their current size at least. (It’s more important to reduce mobile version sizing btw).

Thanks,

https://www.us-beforethem.com/

pass: usbeforethem

ExtraordinaryH_0-1737392915854.png
ExtraordinaryH_0-1737392915854.png2506×1393 505 KB

ExtraordinaryH_1-1737392995000.png
ExtraordinaryH_1-1737392995000.png1404×1243 120 KB

2

Hey,

you can just add to your CSS and play around with this rule:

.collection-list .grid__item {
  max-width: 10%;
  min-width: 10%;
}

Also your theme contains 3 base breakpoints (1600px, 990px and 750px), so if you want to make the solution more adaptive to different screen sizes, you could append a few more rules:

// desktop
@media (max-width: 1599px) {
  .collection-list .grid__item {
    max-width: 8%;
    min-width: 8%;
  }
}

// tablet
@media (max-width: 989px) {
  .collection-list .grid__item {
    max-width: 10%;
    min-width: 10%;
  }
}

// mobile
@media (max-width: 749px) {
  .collection-list .grid__item {
    max-width: 24%;
    min-width: 24%;
  }
}
3

@etumyan

This worked perfectly, thank you so much, it was killing us slowly :sob: !