How do I get rid of the excess space on the mobile version of a wufoo form?

Question

On google chrome, the mobile version of the wufoo form is showing up exactly how I want it to (see picture below):

enter image description here

But on my iPhone, there is an excess space that I can't seem to get rid of at the top of the form (see picture below):

enter image description here

When I messaged WuFoo about this problem, they said they do not provide help for custom css issues. Since my google chrome developer tools doesn't show the issue, I'm stuck. Does anyone know how I can get rid of this excess space?

Thanks!

Answer 1

If I've understood your question correctly, you want to remove the padding-top: 20vh from your html -element when the page is displayed on a narrow device.

In that case, this CSS should do what you want. I've reused the same @media -query that is used on your page already, with the assumption that that is the size you define to be for mobile devices.

@media only screen and (max-width: 480px) {
    html {padding-top: 0}
}

If you add this code snippet to the end of your CSS file (probably wufoo.css), it should remove the space above the form on mobile devices.