Why is the mobile background of my store zoomed in?

Store Design
1

Why does shopify show the mobile background of my store like this:

harDnut_0-1680557644744.png
harDnut_0-1680557644744.png196×297 42.5 KB

But when in reality it is zoomed in like this:

harDnut_1-1680557683989.png
harDnut_1-1680557683989.png217×269 75.6 KB

Would be awesome if someone could help me

my store url: https://gadget-daddy.com/

2

Do you want it to display zoomed in to the level shown in the second image? If so you can copy and paste this code into the Custom CSS section of your Theme Settings found in the Customize editor:

@media screen and (max-width: 749px) {
	main#MainContent {
	  background-size: 840% !important;
	}
}
3

Hey,

no I actually want the oposite. Right now it shows like in the second image but I want to zoom it out so it looks like on the first image. However I dont want to change anything on the browser version. I only want to zoom out the mobile version. Does that work seperately?

4

Ah ok I see. I was confused because it displays properly when viewing on desktop using mobile screen sizes. It’s only on actual mobile devices that it displays differently. I’m looking into it further.

5

Thank you my man. Would be awesome if you could solve this for me. Been trying to get this done the whole day

6

Try adding this to the Custom CSS section of your Theme Settings instead:

@media screen and (max-width: 767px) {
  main#MainContent {
    background-attachment: scroll !important;
  }
}
7

It worked! Thank you so much!