Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Refresh Theme Banner image behavior

Solved

Refresh Theme Banner image behavior

ch4rbelk
New Member
6 0 0

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

 

 WhatsApp Image 2024-07-10 at 11.09.20 AM.jpeg

Accepted Solution (1)
lynth
Shopify Partner
140 6 16

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 😉 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!

View solution in original post

Replies 10 (10)

lynth
Shopify Partner
140 6 16

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.

Screenshot 2024-07-10 at 10.45.24.png



If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
ch4rbelk
New Member
6 0 0

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.

lynth
Shopify Partner
140 6 16

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). 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
ch4rbelk
New Member
6 0 0

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

lynth
Shopify Partner
140 6 16

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.

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
ch4rbelk
New Member
6 0 0

Thanks Lynth, I will check it out!

lynth
Shopify Partner
140 6 16

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 😉 

If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
ch4rbelk
New Member
6 0 0

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

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

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 Support me: Buy Coffees
- 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.

ch4rbelk
New Member
6 0 0

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.