Collection picture size - mobile only

Solved

Collection picture size - mobile only

alopat
Tourist
5 0 1

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 

IMG_1603.jpg

Accepted Solutions (2)
Spac-es
Shopify Partner
389 112 135

This is an 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:

updated-code.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

styles.css

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
4403 1135 1394

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

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
alopat
Tourist
5 0 1

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?

 

Screenshot 2024-07-03 at 13.02.17.jpg

Screenshot 2024-07-03 at 13.02.08.jpg

Spac-es
Shopify Partner
389 112 135

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):

test-camera.PNG

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Spac-es
Shopify Partner
389 112 135

This is an 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:

updated-code.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
alopat
Tourist
5 0 1

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

Spac-es
Shopify Partner
389 112 135

This is an accepted solution.

styles.css

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!