Form is cut off on mobile devices and doesn't resize

  • Profile Image
    XtraVelocity
    Asked on August 04, 2013 at 07:38 PM

    My form at http://www.xtravelocity.com/order/ looks fine on desktop devices but when on mobile, the form doesn't resize and overflows in width. it also is cut off vertically. How can I fix this?

    I use an iPhone 5 if it helps.

  • Profile Image
    Welvin
    Answered on August 05, 2013 at 12:35 AM

    Hi,

    Please try to change your form width from 850px to 550px. Follow this guide: https://www.jotform.com/help/35-The-Importance-of-Form-Widths. Then re-embed your form using our script type embed method as shown on the screenshot below:

    Let us know for the result.

    Thanks

  • Profile Image
    XtraVelocity
    Answered on August 25, 2013 at 07:53 AM

    Still overlaps the same as the picture above. I don't want to make the form width any smaller otherwise it'll start looking strange on the desktop view :/

  • Profile Image
    jonathan
    Answered on August 25, 2013 at 08:26 AM

    Hi,

    Can you please also try this workaround.

    Inject this CSS code on the form

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

    .form-textbox, .form-textarea{

    width:300px !important;

    min-width:300px !important;

    max-width:300px !important;

    }

    }

    Feel free to change 300px width to your preference.

    For the transparency on IE, simply insert the following property under .form-textbox, .form-textarea class on the existing CSS injected to your form.

    filter:alpha(opacity=50);

     

    See if this makes any difference. Inform us if you need further assistance.

    Thanks.

  • Profile Image
    XtraVelocity
    Answered on August 27, 2013 at 10:18 AM

    This fixed the text box issue by using this code:

     

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

    .form-textbox, .form-textarea{

    width:200px !important;

    min-width:200px !important;

    max-width:200px !important;

    }

    }

     

    But the text and captcha still overlap. Is there anyway to fix this?


  • Profile Image
    ashwin_d
    Answered on August 27, 2013 at 01:34 PM

    Hello XtraVelocity,

    ReCaptcha field is hardcoded and hence cannot be changed. If you change your ReCaptcha field to normal captcha field and then inject this CSS code in your form to customize the size:

    @media only screen and (max-device-width: 550px){.form-textbox, .form-textarea{width:200px !important;min-width:200px !important;max-width:200px !important;}

    .form-captcha, .form-captcha-image,  .form-captcha input{

    width: 200px !important;

    min-width:200px !important;

    max-width:200px !important;

    }

    .form-html{

    width:200px !important;min-width:200px !important;max-width:200px !important;

    }

    }

    Hope this helps.

    Thank you!