How can I resize product images for desktop on my site?

isaacdob · ‎01-31-2024

I am trying to make my product images on the homepage of my site smaller. The size is perfect on mobile but on desktop it's way to big. I'm using the North theme and my website is https://evrenclothing.com/

Dan-From-Ryviu · ‎01-31-2024

Please use this code and check again

<style>
@media (min-width: 768px) {
.products.row { max-width: 500px !important; margin: 0 auto; }
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-31-2024

Hi @isaacdob

You can add this code to theme.liquid file, after <head> in Online store > Themes > Edit code and save file

<style>
@media (min-width: 768px) {
.products.row .product { max-width: 500px; }
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob · ‎01-31-2024

Thanks for responding. The only thing is that I want it to only be 1 product in each row. Can you help me with this?

Dan-From-Ryviu · ‎01-31-2024

Please use this code and check again

<style>
@media (min-width: 768px) {
.products.row { max-width: 500px !important; margin: 0 auto; }
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Thera-Cubes · ‎07-19-2024

Hey Dan,

Would you be able to help me out I am having the same problem with my desktop images being too large. I am trying to make the video and the image banner below it smaller.

here is the website

https://theracubes.com

thank you in advance!

How can I resize product images for desktop on my site?

How can I resize product images for desktop on my site?

Community Blog Articles