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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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