Re: Make product image smaller on desktop

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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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!

Re: Make product image smaller on desktop

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

Community Blog Articles