How can I arrange my collection page items side by side on both mobile and desktop?

[TrendBlend]

Hello my page collection page currently looks like this but I want to make it more like in this order on phone and on desktop. I just want them to show next to each other inline like on the picture below. Does anyone know how to do that? My current code is this: My website URL is Collecties – TrendBlend. Thanks in advance!

.card__heading {
  text-align: center;
  color: #0000ec;
  font-weight: bolder;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 16px;
}
.card__inner,
.card__media {
  position: relative;
  border-radius: 50%;
  display: block;
  width: 170px;
  height: 170px;
  background: #e6e7ed;
  -moz-border-radius: 30px;
  -webkit-border-radius: 90px;
}

[Xipirons · Accepted solution]

Hi @TrendBlend 

Try this at the bottom of the base.css file :

.collection-list__item.grid__item.scroll-trigger.animate--slide-in {
flex: 15%!important;
}

[Xipirons · Accepted solution]

Hi @TrendBlend 

Try this at the bottom of the base.css file :

.collection-list__item.grid__item.scroll-trigger.animate--slide-in {
flex: 15%!important;
}

[TrendBlend]

Hi @Xipirons that works, thank you! Do you also know how I can get the light brown border line around the picture?

Kind regards,Stef

[Xipirons · Accepted solution]

Hi @TrendBlend 

For the border around the picture :

.card__media {
border: 5px solid #AF9676;
}

[TrendBlend]

And one more question do you maybe know how to do it like this, so the pictures around not being placed on top of each other?

[Xipirons]

Hi @TrendBlend 

I don't understand your question... Could you reformulate ?

[TrendBlend]

Hello @Xipirons, I want the collections to be scrollable next to each other like this if possible on phone and desktop

it currently shows like this: Collecties – TrendBlend