iFrame Resizing Custom CSS

My form looks perfect when its on the mobile using the form link but when embedding the form into my website using iFrame it resizes the heights of all the fields.

After checking your form (direct link) on a mobile phone (Android), I see that the issue in your screenshot is also present (not just when your form is embedded).

To fix the issue, please remove the following CSS codes below in the CSS tab of the first Image Picker widget in your form.

@media only screen and (max-width: 480px) {

.divimg img{

    height: 65% !important;

}

}

I hope this helps. Please feel free to contact us again anytime if you have other questions or concerns.

Thank you.

this did not help.

Instead of using the oEmbed plugin to embed the form, use the actual iFrame code:

https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

If that does not allow images to be sized properly on mobile when the form is embedded, we will be happy to have another look to see what is causing the height to be incorrect on mobile. 

i am using the iframe.

I checked your page and it looks like the plugin is still being used to embed the form:

Remove the form and add in your iFrame code in with your pages code:

https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

<iframe id="JotFormIFrame-70675637757471" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; 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); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } 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; } } </script>

That is your forms iFrame code, however, that does not appear to be what is added to the site.  If the website builder you are using does not accept scripts, try embedding the form without the script portion:

<iframe id="JotFormIFrame-70675637757471" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; border:none;" scrolling="no"> </iframe>