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

[ExtraordinaryH]

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

[etumyan · Accepted solution]

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%;
  }
}

[ExtraordinaryH]

@etumyan 

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