Dawn Theme Mobile banner zooms in when fixed to background

rlhs
New Member
10 0 0

Hello

 

Can someone kindly help me, I've looked everywhere for an answer to fix this issue 😕

 

I am currently using the Dawn theme. I have an image where when on desktop, if I leave the image behaviour to none it works well but if I change it it zooms in. I'm wanting to fix the banner to the background but when I do so the image zooms in on both the desktop and the mobile. Is there a way to get it to not zoom in? I tried the image with different dimensions and can't figure out a fix for it.

 

This is when the image behaviour is set to none.

rlhs_0-1700087341292.png

rlhs_1-1700087371820.png

 

And this is when it's set as "fixed background position"

 

rlhs_2-1700087532428.pngrlhs_3-1700087553784.png

 

Replies 17 (17)
Dan-From-Ryviu
Shopify Partner
5415 987 1008

Hi @rlhs 

Could you share your store link? 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

rlhs
New Member
10 0 0

Hello it's https://kireikosmetics.com/collections/makeup

the password is usuwah

thank you 

Dan-From-Ryviu
Shopify Partner
5415 987 1008

Hi @rlhs I cannot see that banner

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

rlhs
New Member
10 0 0
Dan-From-Ryviu
Shopify Partner
5415 987 1008

Hi @rlhs 

Please try to uncheck this option in your Image banner section and then check again

Screenshot 2023-11-16 at 09.29.19.png

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

rlhs
New Member
10 0 0

rlhs_0-1700107465282.png

I just tried it, but it's still zoomed in

Dan-From-Ryviu
Shopify Partner
5415 987 1008

Please uncheck that option, save your changes so I can check

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

rlhs
New Member
10 0 0

Yep It's done, It's unticked and saved

Made4uo-Ribe
Shopify Partner
4025 919 1126

Hi @rlhs 

 

I do see what you mean.  I would suggest creating a section for desktop and a section for mobile. Set the desktop image behavior to none, and you can set the mobile to zoom. You can follow the tutorial video below. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


rlhs
New Member
10 0 0

Thank you, I gave it a try but even when I do a mobile section only after adding the codes in the video, the images still zoom in when I change the image behaviour to "fixed background position :,(

Made4uo-Ribe
Shopify Partner
4025 919 1126

You might have to provide a different image size appropriate for mobile. Mobile usually looks good on portrait size images and not landscape

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


rlhs
New Member
10 0 0

I have tried different dimensions, both landscape and portrait and both zoom in on desktop and mobile. 

Made4uo-Ribe
Shopify Partner
4025 919 1126

Sorry. I do not see the banner in your website, https://kireikosmetics.com/collections/makeup. Is it on different link?

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


rlhs
New Member
10 0 0
Made4uo-Ribe
Shopify Partner
4025 919 1126

I see the issue. It is a collection banner. Sorry, I thought it was an image banner. The theme only offers one photo to show that is use for desktop and mobile. You can have another photo added but, but you have to have someone write this for you since the solution is a little complex. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


rlhs
New Member
10 0 0

The banner is an image in a collections page, so that can't be done?

Made4uo-Ribe
Shopify Partner
4025 919 1126

With your current settings, I cannot find a way to do it. But with the help of a custom code, it can be done. Someone has to add a new code for you to have another image for mobile. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com