White space on mobile where script is?

Hello, my form (embedded via iframe into squarespace) looks fine on desktop but leaves a large white gap at the bottom on mobile.

I played around with @media css to no avail; removing the script at the end of the code reduced the space but also cut off the 'submit' button, so I think that's the conflict. Can you help?

I see you tested on iPhone. I tested on iPhone on Safari, but I wasn't able to replicate this issue, the gap below the form is normal:

Were you able to fix this issue or is it still persist for you?

Please let us know.

Thank you!

Hi Nik, still having this issue on the devices I'm testing:

Could you please tell us on which devices did you test so we can try to replicate this issue?

We'll wait for your response.

Thank you!

iPhones 6 and 7.
...

I'm testing on iPhone 7 as well.

The issue is that I'm still unable to replicate this issue, and I tested on Safari and Chrome. 

You could try inserting the below CSS in your Squarespace:

iframe#JotFormIFrame-72708053905154 {

    margin-bottom: -20%!important;

}

Here is how: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor

That should bring the bottom margin up, now that could interfere with how the form would show on other devices.

And, again, it is showing fine on mine.

Please let us know if that worked.

Thank you!

That helped a bit but there's still a block of white space on my screen
(cleared the browsing data, too, just to be sure). Glad to know not
everyone will see it this way. Let me know if there's anything else that
might work.
[image: Inline image 1]
...

Unfortunately, the image that you have attached failed to show up here in the forum. You can follow this link and post the image screenshot here: https://www.jotform.com/answers/1266209

But if you are referring to the whitespace below the submit button, you can modify the CSS of your page (squarespace) and use this code:

#block-yui_3_17_2_7_1507240461229_15309 {
     height: 2px;
}

You can further adjust it with CSS that you know in relation to spacing such as setting tha padding and margins, etc.

Feel free to let us know if you have questions.

Hello, a friend just alerted me to another issue with my form, which is
that it's not showing the results. The form has conditional responses and
is embedded as an iframe in my homepage to show the results immediately,
without leaving the page. www.yardkit.com
[image: Inline image 1]
Ideas of what might be going wrong here?
...

Your form worked for me as well.

However, when I tried different iOS versions and browsers, I was able to see the gap below the form.

Please try these fix.

1. Re-embed your form using the following iframe embed code with a maximum iframe height so it does not create huge space below the form.

<iframe id="JotFormIFrame-72708053905154" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/YardKit/is-yardkit-right-for-you" frameborder="0" style="width: 1px; min-width: 100%; height:539px; max-height:600px;border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72708053905154"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

If the above solution does not work, try this.

1. Take your iframe embed code again then append this before embedding it on your website.

<style>@media screen and (max-width:480px){#JotFormIFrame-72708053905154{height:600px !important;}}</style>

Hope any of these helps. Thanks