Problems with Webflow Template for Mobile

Hi there,

I am using the Magnetic Template – The background image won’t “Contain” fully when published for mobile. This was occurring before I changed anything such as making the height 100vh for both body and height. I have used this template before and did not notice this problem before, although I am also noticing that this is an issue with this template for other landing pages I have made, such as officialohm.webflow.io

http://magnetictemplate.webflow.io/ — I noticed that the template is using a tiled background… is there any way around using a tiled background?

Preview link: https://preview.webflow.com/preview/franchescaamaya7?preview=5d294e9e1f975e29518f2ae5694adcf6

What do you mean with “Contain” @simplypractical, do you mean as in it doesn’t resize or something else? Because right now the background does take the whole screen even on mobile its on full scale.

Whoops, I meant “Cover” in regards to the background image display. When I view it on mobile, the image doesn’t fill the screen - unsure as to why. Examples below.

Portrait: http://tinypic.com/view.php?pic=4sclts&s=9#.WGL7gGQrJL8 – cuts off at the beginning the of form before it just shows black background.

Landscape: http://tinypic.com/view.php?pic=rck32e&s=9#.WGL532QrJL8 - cuts off at “Sign up…”

Does it appear like this on your end?

The background image seem to cover the whole page on mobile views. Did you already fix this?

I am unable to view images hosted outside of this forum, if you require further assistance please re-upload them using the post tools here.

I checked out the images @simplypractical and saw that it’s indeed different on my phone compare to desktop. I also noticed your webflow image (in the editor) is different then the live version.

So is it possible you changed some of the function? On my phone the image is tiling instead of covering the whole screen, while on the PC it’s working fine.

For each platform (desktop, tablet, etc) it’s set for the background to “Cover” and should cover the whole page… but on my IPhone 6 it doesn’t seem to be the case. I have also tested this out on the Nexus 5X.

Hmmm… Well I used this template for another landing page I created and before I did not have a problem with the background image. I noticed that I was having issues with this site (franchescaamaya7) and decided to check the other site (officialohm)-- same problem occurred even though I didn’t even know there was a problem… wondering if it’s a backend issue now?

Hi @simplypractical, the main issue is that in the design, the image you are using as a background is fixed, and also added to the body class and section class, and applying a fixed position to background images is not supported very well on mobile devices (especially iOS).

A better method to get consistent results on any device, is to put a div under the body, give it a class, then apply a fixed positioning on the div, with full cover and z-index of -1. Next, assign the background image to the div, with full cover and center position, with tile set to off. Do not set the fixed position on the background image, only on the parent div the background image is being assigned to.

Take a peek at my video, it should help:

https://cl.ly/092h2f3Z2I2a/Screen%20Recording%202016-12-29%20at%2006.33%20PM.mov

I hope this helps!

2 Likes

Thank you, @cyberdave! This did the trick :slight_smile:

1 Like