Hero content is moving to the next section

Design help Layout & Design
1

Hi Everyone.
I am new to webflow and am having issues with the landing page I am making. Everything is fine on my big monitor when I scroll through the different breakpoints, but when I drag the window onto my laptop screen the hero text content gets pushed to the next section down. I adjusted the top margin and it looks fine, but when I drag the window back up to my large monitor the content is up around the top of the page. I would appreciate any help or suggestions.
Thanks
Toby

Here is my site Read-Only: **LINK**https://preview.webflow.com/preview/tahoe-tranquil-retreat?utm_medium=preview_link&utm_source=designer&utm_content=tahoe-tranquil-retreat&preview=4201db94feeb216f23aafda5da97a4af&workflow=preview
(how to share your site Read-Only link)

2

If you set your hero to 100vh it will be 100% of viewport height:

height: 100vh; means the height of this element is equal to 100% of the viewport height.

example: height: 50vh;
If your screen height is 1000px, your element height will be equal to 500px (50% of 1000px).

Then if you want the text stuck to the bottom left you has can set it to absolute positioning and adjust from there.

3

Thank you so much Kyle. I appreciate the help.