Change number of products in each row for collections (mobile only)

cftsr
Excursionist
21 0 6

Hello!


Does anyone know whether in mobile view, there is a way to change the number of products displayed in each row so that there is one large product image in the first row and two medium product images in the second row?

For example: 

IMG_3612.jpg

0 Likes
Quyen_Beo
Explorer
58 7 12

In your css file
@media (max-width: 767px)

  .your-product-grid-item-class:nth-child(3n+1){

    width: 100%;

  }

  .your-product-grid-item-class:nth-child(3n), .your-product-grid-item-class:nth-child(3n+2){

    width: 50%;
    clear: none;

  }

}

I can't give you the exactly code because you didnt share the store url. So above is the suggestion.
It will make the product on 1st, 4th, 7th ... full width
Other product will be 50% width

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
cftsr
Excursionist
21 0 6

Thanks for the response! Have privately messaged you the store details.

0 Likes
Quyen_Beo
Explorer
58 7 12

Put these CSS in bottom of your CSS file then check on frontpage.

@media (max-width: 767px) {
.template-collection #Collection .grid--view-items .grid__item:nth-child(3n+1){
width: 100%;
}
.template-collection #Collection .grid--view-items .grid__item:nth-child(3n+2),
.template-collection #Collection .grid--view-items .grid__item:nth-child(3n){
width: 50%;
clear: none !important;
}
}

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes