Input field to wide on mobile devices

  • Profile Image
    EBMSmarketing
    Asked on April 10, 2015 at 04:45 PM

    I've tried to inject css code to force the id to a certain width but it doesnt work. I must be missing something. 

    Probably a really simple fix. 

  • Profile Image
    Syed
    Answered on April 10, 2015 at 05:14 PM

    Hi there;

               Please inject the following CSS Code Block, for more information read our guide here on How to Inject Custom CSS.

    @media (min-width: 300px) and (max-width: 480px) { .form-textbox, .form-textarea, .form-radio-item, .form-checkbox-item, .form-captcha input, .form-spinner input, .form-error-message {width: 80% !important; box-sizing: border-box !important; }}

    Will let us know, if you have further questions on this.

     

    Have a Great Weekend!

    Thankyou,

    - Syed

  • Profile Image
    EBMSmarketing
    Answered on April 10, 2015 at 05:32 PM

    Thank you! That worked for the first page of the form, but the text still runs off the page on the second half of the form...any suggestions?

     

  • Profile Image
    Syed
    Answered on April 10, 2015 at 05:44 PM

    Hi there;

             I updated the answer here on this thread, please use the injected CSS Code Block;

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item, .form-checkbox-item {white-space: normal !important;}}

    http://www.jotform.com/answers/550456-Text-running-off-of-form-on-mobile

     

    Thankyou,

    - Syed

  • Profile Image
    EBMSmarketing
    Answered on April 13, 2015 at 12:57 PM

    Hi there!

    I added that code to the "Inject Custom CSS" section on both of my forms, and I'm still having issues with the text running off the page. I requested that my coworkers try it and they are having the same issue. 

    Thank you!!

    Here are the two forms we're having issues with:

    http://form.jotform.us/form/50952486850160

     

     

    http://form.jotform.us/form/50952314248151

  • Profile Image
    Syed
    Answered on April 13, 2015 at 01:41 PM

    Hi there;

            Previous CSS Code Block wasn't pasted correctly, please inject the following CSS Code Block for specified Forms. Read our guide here on How to Inject Custom CSS Codes. Review the following screenshots of both forms.

    First Form (http://form.jotformpro.com/form/51025712550949):

    Injected CSS Code Block:

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item, .form-checkbox-item {white-space: normal !important;}.form-multiple-column, .form-single-column {width: 100%;}}

    Second Form (http://form.jotformpro.com/form/51025488022953):

    Injected CSS Code Block:

    @media (min-width: 300px) and (max-width: 480px) { .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header {white-space: normal !important;}}

     

    Will let us know if you need further assistance.

     

    Thanks,

  • Profile Image
    EBMSmarketing
    Answered on April 13, 2015 at 02:04 PM

    Thank you! That worked :) 

  • Profile Image
    Syed
    Answered on April 13, 2015 at 02:06 PM

    You're welcome, let us know, if you need further assistance, we would love our users to assist :)

     

    Thankyou,