Fulls screen hero section needed. 100vh hero section looks funny in my browser

Design help General
1

We are hoping to make the hero section full screen. We set the hero section to be 100vh and this is what it looks like when we browse in Chrome on a 15" laptop:

Screenshot 2020-10-14 at 11.57.47 AM
Screenshot 2020-10-14 at 11.57.47 AM2724×1398 119 KB

Notice the cutoff of the mouse icon at the bottom. We want the whole mouse icon to show near the bottom of the screen when the page has loaded with the hero section as full screen.

On our browser, we found that the height of the hero section needs to be between 82-85vh to look like it’s full screen. But we still can’t actually get the full screen effect when we enter full screen with the Chrome browser.

What are we missing here?? :thinking:

Our read-only link is here

2

@skinpores the answer to this question in your previous topic

You don’t need to do the height of the section by eye like as between 82-85vh, just write a custom CSS function using this.

3

I’m not techy enough to know what to do to fix this. I just want my background image to fill the full height of the user’s viewport (desktop and mobile) and cut the width, as needed to maintain the full height. How do I do this?

https://brians-dandy-project-756d8f.webflow.io