Resize/Position Strip Background only on mobile

Ask the community
,
1

Hi all!

Pretty new to Wix so having some trouble that might be easily solved for experienced users.

Scenario:

  • Desktop home page has one strip with a background image. Looks great on desktop as you can see the entire image.
  • Mobile home page tries to translate/resize that strip for mobile viewing and the relevant portion of the image gets left off the mobile screen as it seems to zoom into the background image.

After spending a good while trying to troubleshoot, it seems you can only change the position of the background image in the desktop editor which, when changed, still hasn’t been translating well to mobile for me.

I’ve also tried adding the same image to the mobile editor, then arranging all the text elements on the strip at the top, effectively ‘sandwiching’ this image between the text and the actual strip background. Unfortunately, this also doesn’t seem to work as the strip background moves with the text.

I’ve reviewed this post but didn’t find it answered this question: https://www.wix . com/velo/forum/coding-with-velo/trying-to-hide-a-background-image-on-mobile-site

Desktop (watch is visible):

2846×1104 336 KB

Mobile (zoomed into middle of image, watch not visible):

640×1122 214 KB

Website: www.thewatchvaultofficial . com

Any help/suggestions would be greatly appreciated!

2

It’s because you made the strip height much bigger on mobile.
If you keep the same width:height ratio it should be okay I think.

3

If you wish to use strips of different ratios for desktop and mobile.
Prepare 2 different images (1 for desktop and 1 for mobile).
Put 2 strips on the page. One with the desktop image and one with the mobile image.
Make the mobile strip collapsed in desktop view.
Remove the desktop strip from the mobile view.