Streaming live at 10am (PST)

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

I have used the 100VH on this website:

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?


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.

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:

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.

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.

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?

@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.

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.

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

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.

@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.

arr i see now i understand :grinning: check this out Fullpage.js step by step set up

1 Like

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