How do I fix the phone number field on mobile?

  • comfortexperts
    Asked on October 25, 2016 at 6:54 AM

    hello.

     

    [data-type="control_phone"] .form-sub-label-container:first-child {

        width: 100%;

        margin-right: 0;

    }

     

    the above fixed the desktop version but not the mobile version. it is still short and cuts off the phone number on a smartphone. your help will be appreciated. thank you.

  • omerorkun JotForm Data Scientist
    Replied on October 25, 2016 at 9:29 AM

    Hi Jessica,

    I have opened your form on a mobile device and here is how it looks like:

    How do I fix the phone number field on mobile? Image 1 Screenshot 20

    To guarantee that it looks properly on every mobile device please use our Mobile Responsive Widget:

    https://widgets.jotform.com/widget/mobile_responsive

    There does not seem to be a problem right now as it is working as you desire but this should eliminate the odds. Please apply this and see if the issue still persists. If it does, can you please provide us the screenshot?

    Please contact us again if you need any further assistance. 

  • comfortexperts
    Replied on October 25, 2016 at 2:17 PM

    i have this widget installed.

     

    still doenst fix the phone number length.

     

    please note i have input mask enabled to make sure they enter the correct amount of digits.

     

    please create a ccs code to inject of fix the problem.

  • Jan
    Replied on October 25, 2016 at 5:49 PM

    I believe you are referring to this form (https://www.jotform.us/form/62919145484161). I opened your form and I was able to replicate the issue.

    How do I fix the phone number field on mobile? Image 1 Screenshot 30

    Please insert this custom CSS code:

    @media only screen and (max-width: 40em) {
    [data-type=control_phone] .form-sub-label-container:first-child {
    width: 100% !important;
    }

    .form-textbox, .form-textarea {
    max-width: none !important;
    }
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    How do I fix the phone number field on mobile? Image 2 Screenshot 41

    Hope that helps. Thank you.

  • comfortexperts
    Replied on October 25, 2016 at 7:19 PM

    wonderful. thank you!