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

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. 

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. 

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.