How to make JotForm mobile responsive when using Iframe embed

One question in relation to the iFrame:  I notice that the height is specified and works perfectly on my PC but when I view the form on a phone (Android) as responsive, the bottom quarter gets cut off due to the height specifications.  I've adjusted the height to make sure the full form is displayed on the phone but it leaves a lot of blank space between my form and footer on the PC (Changed from 2190 height to 2890 on the Big Sky form).  Is there a simple solution to this?

Usually that <script></script> part in the iframe embed code is in charge of that, unless there is something on that page that makes it not work properly.

We can however still style if using CSS, but we would need to see the page where the jotform is embedded on to know how to properly set the CSS rules, but the idea would be:

@media screen and (max-width: 768px)
{
     iframe {
          min-height: 2890px;
     }
}

and set the iframe code back to to height: 2190 in its style parameter.

As mentioned, once we have a link to your website page where the jotform is, we can add the required details to work.

Sorry, forgot to include those links.  My forms are:

http://www.spokanebodybuilding.com/big-sky-championships/big-sky-entry-form/

http://www.spokanebodybuilding.com/empire-classic/entry-form/

I tried that CSS but couldn't seem to get it to work, not that I necessarily know what I'm doing.  With the iframe height specified as Jotform provides it the phone will display it properly in landscape but cuts the form off in portrait.

 

Thank you for the links.

Could you please try adding this code to your website:

<style type="text/css">
  @media screen and (max-width: 360px)
{
     iframe#JotFormIFrame {
          min-height: 2930px;
     }
}
</style>
<iframe frameborder="0" scrolling="no" style="width:100%; height:2100px; border:none;" src="//form.jotformpro.com/form/50648760142959" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

That would be for this page: http://www.spokanebodybuilding.com/big-sky-championships/big-sky-entry-form/

Now for this other page (http://www.spokanebodybuilding.com/empire-classic/entry-form/) please try adding this code:

<style type="text/css">
  @media screen and (max-width: 360px)
{
     iframe#JotFormIFrame {
          min-height: 2930px;
     }
}
</style>
<iframe frameborder="0" scrolling="no" style="width:100%; height:2470px border:none;" src="//form.jotform.us/form/50645420585152" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Do let us know how it goes.

That worked perfectly!  Thank you so much for all of your help.

Great to hear that :)

You are welcome, do let us know if you happen to have any questions or need our assistance and we would be happy to assist. :)