Preview view vs Phone

Hi my name is Tomas, im by no means a designer, but started two months ago with Webflow to create a fresh simple and modern web for my current IT business in Argentina after watching many Webflow YouTube videos.
I am in the start process of my web and still have loads of content to incorporate to my proyect. This is why i´d like first to understand better this tool and create a solid structure before i get things messy.

Im having general trouble with scales and breakpoints.
I am kind of confused on when i should use px, %, vh or dvh.
Been working to have a solid and consistent sctructure with Sections, Containers and content…

But right now i am having trouble to understand how i could be able to provide an identical experience with my footer and contact form, wether it is in a 1920x1080 screen or any kind of tablet or phone.

This is what i see from my preview viewport in Webflow:

This is what i get to see from my phone:

First of all the Width scale looks really fine. But the Height is not what i can preview.
It may seem a small problem but i feel it really changes the experience. I dont want clients to see a half way footer or contact form. I want the section to cover the complete Height real state from the phone to see the complete form and footer.

I am unsure if there is some formats that i should be using differently or if this is exactly what i should expect.
I get really confused when the preview viewport in Webflow shows me something that then does not reflect when published. (Similar issues that i had with bigger screens).

Please, if some one could give me a tip or two, it would be highly appreciated.

Here is my site Read-Only: Webflow - Techforce SRL