All things Shopify and commerce
Hi, I need help regarding image size on my store. Can someone help me to code to make my images fit on both desktop and mobile phone pls?
Hi @nhabd12
It can be but will not display in excellent size, so I recommend you create 2 image banner sections, one for desktop and one for mobile.
In mobile section, add this code to Custom CSS to hide it on the desktop
@media (min-width: 768px) {
.banner { display: none; }
}
And add this code in Custom CSS of desktop image banner section to hide it on mobile
@media (max-width: 767px) {
.banner { display: none; }
}
I hope this helps.
Best regards,
Dan from Ryviu
- Solved it? Hit Like and Accept solution! ❤️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: 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.
This solution is what we use only when we want completely different images. Normally we try and set focal points that work well across both desktop and mobile so it naturally crops where we need it. We design banners around this functionality.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025