Streaming live at 10am (PST)

100 VW extending beyond max view port & background issue on mobile


#1

Webflow link: https://preview.webflow.com/preview/golden-guardians?preview=3667dec5d3c6ef671811a05c080fd368

Live website: http://goldenguardiansmock.com/

I’m having two issues:

  1. I’m trying to use 100 VW on the majority of this website, which is working fine on the Webflow previewer. When I host the website myself, I get the option to scroll horizontally as the website is pushing beyond the 100VW of my screen. I’m not sure why this is, and I don’t know how to remedy it without changing my VW to something like 99VW.

Here’s a screen cap of the issue: https://gyazo.com/80e05fe2eb8fa8dd2b478cf1ece73734

  1. On the mobile version of the live site, there are two transparent sections that should be displaying a background image that is attached to the body of site. For some reason I am seeing these sections in white, whereas in the Webflow previewer they are being displayed as intended.

Here’s a screenshot of this issue: https://gyazo.com/e7a288b77b1537bdd56b37c5e1fec0c9

Any help would be greatly appreciated!


#2

The first one is easy - do not use vw for the full-width elements. The reason? VW doesn’t take scroll into consideration while calculating width of the viewport. Use % instead.

The second one - no idea but can confirm that no background is visible on mobile (Chrome, Android).


#3

Hi @jamestitchener, on the mobile version issue with the bg, android is rendering the bg as none, due to fact that on mobile portrait no bg has been set:

In the designer:

I would try adding a bg image first, then republish and check to see if that helps.


#4

Hey cyberdave.

Thanks for replying.

The background is actually fixed to the body. The goal is for the fixed background to be visible on the transparent "Team Section v2 mobile.

Your suggestion is a good enough alternative, however, so I’ll just go with that!

Thanks!


#5

That seemed to do the trick! Thanks!


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.