Form working on PC but truncated on IPAD

  • Profile Image
    pete1024xx
    Asked on November 18, 2015 at 04:33 PM

    I designed a form to handle 4 applicants in a golf tournament and it's working well on a PC. On an IPAD it gets truncated near the bottom of the 3rd player. How can I get it to display the full form? The form is located at this address:

     

    http://www.plantationcommunityfoundation.org/events-programs/celebrity-classic/

  • Profile Image
    Ben
    Answered on November 18, 2015 at 06:11 PM

    I took a look at your form and I see what you mean.

    To correct it, I would suggest adding the following to your site code - you can do it right above the iframe code.

    <style type="text/css">
    @media screen and (max-width:320px) {
      iframe#JotFormIFrame {
        min-height: 4070px;
      }
    }
    @media screen and (max-width:360px) {
      iframe#JotFormIFrame {
        min-height: 4000px;
      }
    }
    @media screen and (max-width:480px) {
      iframe#JotFormIFrame {
        min-height: 4200px;
      }
    }
    @media screen and (max-width:568px) {
      iframe#JotFormIFrame {
        min-height: 4070px;
      }
    }
    @media screen and (max-width:766px) {
      iframe#JotFormIFrame {
        min-height: 4250px;
      }
    }
    @media screen and (max-width:1023px) {
      iframe#JotFormIFrame {
        min-height: 4120px;
      }
    }
    </style>

    Now it is best to test it out once you add it to the website and do let us know of the outcome.