Shopify themes, liquid, logos, and UX
Hello,
I am using the Refresh theme and I added a banner with "Zoom In on scroll" image behavior. The problem is on Desktop it looks great but on mobile the image is zoomed in without even scrolling.
When I set the image behavior to none it works fine on both mobile and desktop.
I really would like to use "Zoom in scroll" image behavior and I tried some of the CSS code recommended on the internet but nothing worked.
link: www.pestapart.com
Pass: gawhim
Solved! Go to the solution
This is an accepted solution.
Sure, let me know if you still need help. If I help you with my advice, just remember to mark it as a solution 😉
Check if you can turn it off for the mobile version. There is a problem with the mobile version also zooming in.
Hacky way - you have to replace object-cover from cover to contain value.
Thank you Lynth for your quick response.
I tried what you suggested but it applied to all my banners. The banner that I want to modify became zoomed out which is good but there are now blank spaces above and under it.
If I turn it off but setting the image behavior to none, It works fine.
you have to specify the class so as not to affect all. Add maybe #Banner-template--15474553880710__image_banner_gmRjWx (it's a unique ID, but I'm not sure it is dynamic).
Great, now it is only affecting the banner that I want.
But what about the blank spaces above and under the banner that I want to adjust? Is there a way so that the mobile banner cover the whole space? should I change the aspect ratio?
Thanks in advance
Go to the Online Store - Theme - three dots - and search the .css extension file, it could be custom.css / base.css or something like this.
Then paste this inside, on the bottom:
@media screen and (max-width: 640px) {
#Banner-template--15474553880710__image_banner_gmRjWx .media > img {
object-fit: contain !important;
}
}
max-width is your maximum screen width where these styles should be added.
Thanks Lynth, I will check it out!
This is an accepted solution.
Sure, let me know if you still need help. If I help you with my advice, just remember to mark it as a solution 😉
The image now is zoomed out in the Banner which is great but still shows blank space above and below the image.
I think the problem is with this function itself inside Shopify. Based on what I found online other people had the same problem and couldn't fix it.
I will change the image behavior to none and keep it that way since it fits perfectly.
Thanks Anyway
Hi @ch4rbelk
Because mobile screens are smaller than desktop screens, so images can be displayed only partially, not in full.
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- 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.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi Dan,
When I put the image behavior as none, it works fine on desktop and mobile. So I don't think it is related to mobile or desktop screens.
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024