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

  • Profile Image
    Bethchoike
    Asked 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. 

  • Profile Image
    Kevin_G
    Answered 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
    Kevin_G
    Answered 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.