iframe embed cut off in wordpress and min-height issues

Hello, my forms weren't displaying on mobile so I switched to the iframe method. I have done research and found this post which is similar to what I am asking: http://www.jotform.com/answers/662095-WordPress-embedded-form-not-showing-on-mobile

The iframe was cutting off the form so I followed the advice from the above article and set the min-height of my forms to 1100px, the code below was recommended.

@media screen and (max-width:768px) {
    #JotFormIFrame {
        min-height: 1100px;
    }
}

However, I have several pages on my site with different jotforms so while the min-height at 1100px works for one like this http://optronics.com/contact/, I have much shorter forms that on mobile have way way too much space under them as a result of the large min-height that makes the other longer form work, see this page on mobile http://optronics.com/products/hd-microscope-video-cameras/microcast-hd-print-pro/ 

Does this make sense?

Is there a way to create a class or something for each individual form that makes it appear correctly on desktop and mobile?

As I checked the form displayed on your webpage - Mirocast HD Print Pro I notice that the form is embedded using JavaScript method while the contact form is embedded using iframe embed method. When the webpage is checked on a mobile emulator, I see that the form is displaying correctly without any issue.

Are you still experiencing the height issue at your end? Please let us know the device model that you are using so that we'll try to replicate the issue at our end and provide you with necessary assistance. 

Also, please provide us with webpage URL where the form is embedded in which you are experiencing the issue.

Thank you! 

Hi Kiran, thanks for the follow up. I forgot that I had 2 forms placed on that page and have now replaced both with iframe. They are displaying which is great, but on my mobile I have tons of white space underneath the form, see screenshot below. Is there a way to get rid of this?

Hello,

When reviewing your form, I was not able to view any submit button on your site. Once I adjusted the height of the iFrame, I was able to view the submit button. I am assuming that this is also the case why you see a big space in your mobile device

Can you please re-embed your form and see if this resolves the issue.

Re-embed how exactly? What I have done currently is take out the code i put in my child theme CSS:

@media screen and (max-width:768px) {
    #JotFormIFrame {
        min-height: 1100px;
    }
}

This affected every form, so I began changing the height it in each form individually but am still running into issues. For example, on my Contact page http://optronics.com/contact/ I have to make the form 1200px in height so it doesnt get cut off in mobile, however that adds tons of white space under the form on the desktop version.

So my problem is having to change the iframe height for desktop and it affects mobile or vice versa. Does this make sense? Do you have any ideas, fixes? 

I also just noticed something else. When I place the iframe code into the Wordpress editor under the text tab, then save it and publish the page, it adds code to the iframe. See images below:

I noticed because I use the "Shortcodes for Widgets" plugin and I add forms into the widget that I know will be repeated across pages and it doesn't add this code in those situations. The WP editor does something to it... Just thought this was interesting and might be helpful information.

Thank you for the update. I am assuming that the CSS code you are referring to is part of your site and not in the form, as I do not find it in the designer window.

@media screen and (max-width:768px) {
    #JotFormIFrame {
        min-height: 1100px;
    }
}

I have been playing around a bit with your site using the chrome debugger and notice that if the height of the form is responsive to the width of the screen. You may try added the following CSS code as well in your site. The above code will only verify for certain devices, if you include the CSS code belowe it will verify smaller devices, like mobile phones.

@media screen 

  and (min-width: 320px) 

  and (max-width: 640px) {

    #JotFormIFrame {
        min-height: 600px;
    }

}

In regards to your other question, it seems that you are reviewing codes for different forms. The before screen refers to the form ID xxxx573161 while the after is referring to the form xxxx473163.

It could be that the second iframe included the height and width, while the first code did not have this included.

Please let us know if you require additional assistance.