Video not resizing properly on mobile

[joycxu (Joy Xu)]

Hi,

I’m having issues with my Main Background Video divs not resizing properly on mobile on my published site (on my ‘Pilot Twitter’ and ‘Pilot Iconography’ pages. The divs are resizing properly in the builder preview but not on my published site.

On builder:

On published site:

Read-only link: https://preview.webflow.com/preview/joycxu?preview=6a48f5cbf0887eec28c538693328330f

Published link: http://joycxu.webflow.io

Thanks!

[garymichael1313 (G.J.)]

I suggest using “VW” for width, and “VH” for height. Percentages work, but sometimes it’s specific enough for me. When you want to get granular and picky - like I am - haha… Use the VW, VH. These styles cascade better too. On the next device, you only need a little tweaking.

[joycxu (Joy Xu)]

Ahh. I’m not too familiar with how VW and VH work, I’m testing it out and still getting some weird behavior. Do you have any suggestions? Thanks!

[garymichael1313 (G.J.)]

Sure, but on the video, I see is the background is independent from the monitor video, right?

1. Because that’s causing the problem of not scaling both at the same time. How was that done? Can you combine them both as a video? Without separating the background from the actual monitor, make them all one export file.

http://www.screencast.com/t/GjX2A5ZJ

2. You must type the letters in after the number. VW = Viewport Width, VH = Viewport Height. These, at least in my opinion, offer better scaling than percentages.

3. As you can see, the monitor scales at a different rate than the background. If you can re-create the video, but add the background in the video editing file before export, they will scale equally.

Let me know how that works.