Collection picture size - mobile only

[alopat]

Hi! I'd like for my collections when viewed on mobile to have three/two and a half (would be perfect) products per row instead of just two. Is it possible to change that? Anyone's help would be appreciated! It drives me crazy 😅

https://www.techbros.ae/ - theme i'm using is charged 

 

[Spac-es · Accepted solution]

Updated code for all sections of the home page:

@media (max-width: 639px) {
  #products--template--22463764332860__featured_collection_dAHpcN.slider .grid-item,
#products--template--22463764332860__featured_collection_zf6QED.slider .grid-item,
#products--template--22463764332860__favourite_products.slider .grid-item {
    width: calc(36% + 1rem) !important;
  }
}

Result:

[Moeed]

Hey @alopat 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
#main-collection-products .grid-item {
    width: calc(33% - 1px) !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[alopat]

Hi! Thank you for replying! It change collections in general, but not the view on the first - main page. Would u be able to help with that?

 

 

[Spac-es]

Add this code in your otsb-style.css file:

@media (max-width: 639px) {
  #products--template--22463764332860__featured_collection_dAHpcN.slider .grid-item {
    width: calc(36% + 1rem) !important;
  }
}

Result (two and a half):

[Spac-es · Accepted solution]

Updated code for all sections of the home page:

@media (max-width: 639px) {
  #products--template--22463764332860__featured_collection_dAHpcN.slider .grid-item,
#products--template--22463764332860__featured_collection_zf6QED.slider .grid-item,
#products--template--22463764332860__favourite_products.slider .grid-item {
    width: calc(36% + 1rem) !important;
  }
}

Result:

[alopat]

Thank You! So i should find right css. file to place it? Because i'm still trying but can't get results 

[Spac-es · Accepted solution]

styles.css