Form cuts in half on (IOS - iPhone 5)

Hi There,

I've a very long form and the end can not be seen in iPhone5.

What should I inject into the CSS to get it look fine?

Here is the form:

http://transaustremovals.com.au/moving-inventory/

Thanks

Effie

Hi Effie,

On my tests, the form cuts in half; but not vertically, horizontally. Please, see the screenshot from the below:

To avoid this issue, please use the following CSS:

@media screen and (min-width: 100px) and (max-width:640) {

    body {

        width: 450px !important;

    }

}

Please, do let us know the results.

Regards.

Thanks Mert - are you checking it on a real phone or just on an online simulator? 

I don't have the actually phone but one of the customers said it was cut...

I've injected the code - could you please check it for me to see if the 'GET A QUOTE' (Submit) button can be seen too? and that its no longer cut in half as you mentioned...?

Many thanks

Effie

Effie, you are most welcome. I checked the webpage and found a mistake. Please, delete the previous code and change it from the one below:

@media screen and (min-width: 100px) and (max-width:640) {

    .form-all {

        width: 253px !important;

    }

}

Please, do let us know when you made the changes.

Thanks.

Thanks Mert - I changed it now - could you please check it again?

I do not have a real Iphone 5 so I could not test your mobile form issue on the device.

I used instead a developer online tool from https://www.browserstack.com using a paid account to check how your mobile form on your website perform on Iphone 5 device.

Unfortunately it still is not working properly as seen on the test result when on the website.

I checked as well using instead just the form URL http://www.jotform.co/form/60673851114857

The mobile form responsiveness perform much better

It is possible that there just a need a mobile setting on your website that needs to be ON or enabled. Can you please if there is such mobile optimization option on your website as well?

We will wait for your updated response.

Thanks jonathan,

I fixed what you suggested and now some of the fields are looking better! 

However the columns are still too wide and not responsive for some reason. ...must be an extra '!important' somewhere that is locking it and I am not able to recognise - if you could have a look at my CSS that would be much appreciated.

Thank you!

Can you add the CSS code below to solve that problem?

@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-all {

        width : 450px !important;

        width : initial !important;

        width : 100% !important;

    }

}

If this does not resolve the issue, please let us know and we will be glad to take another look.

Hi again,

I know, It has been a frustrating period of time with full of alternative answers; but currently, I think we found the best solution. Please, ignore all of the previous suggested codes and apply the following one:

@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-label {

width: 250px !important;

}

.form-all {

width: 600px !important;

}

.form-textbox{

width: 52px !important;

}

}

In addition, we checked it on real iPhone, so this issue has officially fixed. Please, apply this one and let us know the results.

Regards.