What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    On Iphone iFrame is wider

    Asked by m_ruiz14 on March 20, 2015 at 01:23 PM

    I have designed a site that I would like to look the same on mobile devices the same as web browsers. The webpage is finally displaying exactly how I like however when I view it on iPhone the iframe is extremely larger. how do I control this? 

     

    Here is a link to my dev page. 

     

    http://ssworkshop247.com/_new_template/

     

    height Mobile JotForm uploads png
  • Profile Image

    Answered by Carina on March 20, 2015 at 02:58 PM

    Please try adding this css code:

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

        .form-all {

            max-width:310px;

        }

    iframe {

            max-width:310px;

        }

    Let us know if we can assist you further.   

  • Profile Image

    Answered by m_ruiz14 on March 20, 2015 at 03:04 PM

    That just strip all the css i did in design view. 

  • Profile Image
    JotForm Support

    Answered by Mike on March 20, 2015 at 04:28 PM

    Have you already fixed the layout? The form looks pretty similar to the desktop version on iPhone.

  • Profile Image

    Answered by m_ruiz14 on March 20, 2015 at 04:43 PM

    I have not. What I am trying to accomplish is the same (or Similar) height on the iPhone. As you can see on the iPhone the height is double as opposed to the iframe on the desktop which is 250px. I basically want them to be identical if possible. 

  • Profile Image
    JotForm Support

    Answered by Mike on March 20, 2015 at 06:12 PM

    I have added the following CSS to your form in order to remove the extra space on mobile devices. The form height should be almost the same on iPhone now.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-line {

    padding: 0;

    }

    div.form-header-group {

    margin: 0 !important;

    }

    }

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

    .form-submit-button, .form-submit-reset {

      font-size: 10px;

      line-height: 12px;

    }

    }

    Thank you.

  • Profile Image

    Answered by m_ruiz14 on March 20, 2015 at 06:42 PM

    That Worked!!!! Thanks!!!!