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

[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 tag

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]

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]

styles.css