Streaming live at 10am (PST)

Trouble with 100vh on chrome while using custom fullpage.js code


#1

I have used the 100VH on this website:
https://preview.webflow.com/preview/featureforward?preview=0e633dd84cdc24600a6804008b8653f9

My client is viewing it on PC and is seeing the next section, instead of a full screen (black line on the bottom):

Any idea why this is happening?

Thanks!


#2

Which page are they viewing in that screenshot?

Did you have them try other browsers?

My first suspicion would be that they have the browser set at an unusually-wide monitor and that your background image is simply hitting its limits.


#3

HI @Corinne

I was able to reproduce the behavior on a windows machine when using Chrome.

I moved the BG video outside of the section and div and this resolved the issue without changing your design. Here is a GIF showing what I mean:

Hope this helps! :slight_smile:


#4

Thanks @Brando,

The problem is i'm using the fullpage.js code for scrolling into each section at once,
So if I take the video out of the div and out of the section it doesn't work properly.


#5

You just need to give each video an id. I tried @Brando suggestion and it works fine. All i did was give each video an id and link to section and it smooth scrolled to each section full screen.


#6

Thanks @Sveky.
In the fullpage.js tutorial there has to be one ID of fullpage.
Which ID's did you give the videos that made it work?


#7

@Cricitem they're using Chrome on PC (on Mac everything is fine in all of the browsers and sizes).

The image is set as a background image so it's not supposed to reach the limits.


#8

What I mean is that if you have the image set to contain instead of cover, you can reach its full width and the browser has nothing to fill out the height. I don't think that is what is happening here, but can't say that for sure because I can't find the page that is in your screenshot. It sounds like Brando and Sveky have a handle on your particular issue, though.


#9

Thanks @Cricitem ! It's a background video actually so there's no option for contain :slight_smile:


#10

Im not sure about the tutorial or why u have to use fullpage.js but as @Brando pointed out moving the videos outside of the Sections and giving each video an id works fine for me. See screenshot of where to add ID names.


#11

@Sveky then what do you need the ID for? If not for the fullpage.js?
The reason i'm using it is to switch to each section at once with one scroll.


#12

arr i see now i understand :grinning: check this out https://forum.webflow.com/t/fullpage-js-step-by-step-set-up/17251/2


#13

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