Solved

Background image looks zoomed in on mobile

Mary07
Tourist
6 0 0

I need help setting up my online store, I’m using debut theme, I changed my background picture and on my laptop everything looks nice but when I go on my mobile the background looks zoomed in on the main page, except when I click on products, the background looks good as how it did in the laptop. Any reason why it only looks zoomed in on the main page  ? 

Accepted Solution (1)
JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Replace the code you shared with this to test:

background-size: contain;

 

body, html {
background: url({{ 'snake_background.jpg' | asset_url }});
    background-color: #000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
}

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 15 (15)

JHKCreate
Shopify Expert
3571 639 916

Hey There!

Would you mind sharing your store's URL so I can check this for you?

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Mary07
Tourist
6 0 0

This is it, I have it on password, since I’m still under try out hopefully you can still see it, 

https://bazaar-beauty-co.myshopify.com/

JHKCreate
Shopify Expert
3571 639 916

Would need the password, you can send it via DM to keep it private if you prefer no worries!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Mary07
Tourist
6 0 0

Password would be mewnti 

JHKCreate
Shopify Expert
3571 639 916

OK had a look here, can't seem to really see what you're pointing at in terms of issue. Would you mind taking a screenshot of the issue maybe it'll be clearer. Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Mary07
Tourist
6 0 0

This how it looks on my phone

 

JHKCreate
Shopify Expert
3571 639 916

Ok That's interesting! Will replicate this and give you a solution once I have it!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Mary07
Tourist
6 0 0

this are the codes i use on theme.scss.liquid

background: url({{ 'snake_background.jpg' | asset_url }});
background-color: $color-body;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center;
background-attachment:fixed;

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Replace the code you shared with this to test:

background-size: contain;

 

body, html {
background: url({{ 'snake_background.jpg' | asset_url }});
    background-color: #000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
}

 

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Mary07
Tourist
6 0 0

thank you so much!!!!!!!!!!!!!!!!!!!!!!!!! i been trying all day and i feel so relief now, it looks just how i wanted it 

JHKCreate
Shopify Expert
3571 639 916

You're most welcome! Should you need anything feel free to let me know by Email, DM or forum tagging, up to you!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
sunnydazeave
Visitor
1 0 0

hi there, i'm launching my website today and i noticed that the mobile version is extremely zoomed in and doesn't look like the desktop version. I tried following the tips you left for the previous person but i don't seem to have a "theme.scss.liquid" to update so I'm bot sure how to go about fixing this. Is there any way you can look into this for me please? I'm using the debut theme as well.

 

this is the mobile version:

sunnydazeave_1-1623688014486.png

 

 

and this is the desktop version:

sunnydazeave_0-1623688005473.png

 

Maddy_Summer
Tourist
3 0 0

Did you find a solution for this?

JHKCreate
Shopify Expert
3571 639 916

Hello @Maddy_Summer & @sunnydazeave ,

Happy to help you out on that, would you mind sharing your store's URL (here of privately your call) so I can provide the code for that?

Thanks!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Maddy_Summer
Tourist
3 0 0

Thank you! 

https://lostandfoundwines.myshopify.com/ 

password lost1