Change number of items per row on Collection Pages

Technical Q&A
1

I’m using the Minimal theme.

I’d like to edit the Collections Pages and All Products Page to have 3 items per row, it currently has 5.

1 Like
2

Please provide website url and if your store is password protected then also provide password

1 Like
3

@Hardik29418

Password: bloom

4

PLease place this code at the end of theme.scss

#CollectionSection .grid .grid__item {
width: 25%;
}
5

@beaandbloom

  • add below code at the bottom of the file theme.css.liquid
  • file path: online store > themes > live theme > action > edit code > assets > theme.css.liquid
#CollectionSection .grid--uniform{
     display: flex !important;
    flex-wrap: wrap !important;
}
#CollectionSection .grid__item{
  width: 25%  !important;
}
6

Hi @beaandbloom ,

Hope you are doing well.

Please place this code at the end of theme.scss:

@media only screen and (min-width: 769px)

.medium-up–one-third {
width: 33.33333%;

}

Hope this helps.