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

    I still can't get the ipad to fit the application

    Asked by Bethchoike on February 09, 2017 at 01:20 PM

    On a computer or a phone the application form looks fine. On an ipad it's too wide and you can't scroll left or right to answer the questions.  Someone helped yesterday by giving me this code:

     

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 

    .form-textarea,.form-textbox,.form-dropdown{

    width: 100% !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 98% !important;

    }

      #id_31,#id_34{

    width: 100% !important;

    }

    #id_30,#id_27,#id_108,#id_14,#id_92{

    width: 40% !important;

    }

    #id_15,#id_93{

        margin-right: 50% !important;

        width: 40% !important;

    }

     

    }

     

    but that didn't fix the problem. 

     

    I've attached what it looks like now...can someone fit it on an Ipad/tablet view. 

     

    Thank you. 

    Page URL:
    www.rsstrailerrepair.com

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 09, 2017 at 03:05 PM

    I have reviewed your form and found it only happens when you're viewing it in a device with iOS 10, testing in a similar device width, but with a previous iOS version it works. 

    The code you got from the other thread seems to be working, but for some reason not being applied to the form on this iOS 10 devices, I can see you have also added the mobile responsive widget to your form so this could also be generating conflict between the given code and the code the widget runs to make the form responsive. 

    I will further investigate why the CSS code is not being applied on iOS 10, but in the meantime, could you please remove the widget leaving the CSS injected code only? 

    Please, do let us know how it goes. 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 09, 2017 at 03:26 PM

    I have further investigated and seems like this is a common issue with iPhone and iPad, seems like for some reason the @media queries (responsive rules) do not work no these devices. 

    Here're some links about it: 

    http://stackoverflow.com/questions/35980874/media-queries-not-working-on-my-ipad 

    http://stackoverflow.com/questions/14818277/media-query-not-working-for-iphone-and-ipad

    You may try the suggestions made on those links, adding this meta tag to your webpage, since the form builder will allow you to add it: 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Additionally, you could also inject this CSS code, it has been changed to affect devices  with retina screen such as the new iPhones and iPads devices: 

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { 

    .form-textarea,.form-textbox,.form-dropdown{

    width: 100% !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 98% !important;

    }

     

     #id_31,#id_34{

    width: 100% !important;

    }

     

    #id_30,#id_27,#id_108,#id_14,#id_92{

    width: 40% !important;

    }

     

    #id_15,#id_93{

       margin-right: 50% !important;

       width: 40% !important;

    }

     

    }

     

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { 

     

    .form-textarea,.form-textbox,.form-dropdown{

    width: 100% !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 98% !important;

    }

     

     #id_31,#id_34{

    width: 100% !important;

    }

     

    #id_30,#id_27,#id_108,#id_14,#id_92{

    width: 40% !important;

    }

     

    #id_15,#id_93{

       margin-right: 50% !important;

       width: 40% !important;

    }

    }

    Also, try injecting the form using the iFrame code, here's the guide: Getting-the-form-iFrame-code

    Do let us know how it goes.