Mobile view issue: the email field is over lapping the phone number field.

  • MCCJAY
    Asked on February 10, 2017 at 6:31 PM

    Hello,

     

    I am having the below problems, the email field is over lapping the phone number field and the lets start button on the first page is not centered. I have had this issue a few times and I'm not sure why this keeps happening. 

     

    Thank you

     

    Mobile view issue: the email field is over lapping the phone number field Screenshot 30Mobile view issue: the email field is over lapping the phone number field Screenshot 41

  • David JotForm Support Manager
    Replied on February 10, 2017 at 6:57 PM

    Try injecting the following code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    #id_56{

        width: 100% !important;

    }

    #form-pagebreak-next_60 {

        margin-left: -50px !important;

    }

    }

    Result:

    Mobile view issue: the email field is over lapping the phone number field Screenshot 30Mobile view issue: the email field is over lapping the phone number field Screenshot 41

    Let us know if you need more help.

  • MCCJAY
    Replied on February 11, 2017 at 12:03 PM

    Hello,

     

    That did help on the mobile view however when I view it on a desktop I am still off center

    Mobile view issue: the email field is over lapping the phone number field Screenshot 20

     

    Thank you again for your help

  • Kiran Support Team Lead
    Replied on February 11, 2017 at 4:00 PM

    I see that you have already injected some CSS code to the form to center the button.

    Mobile view issue: the email field is over lapping the phone number field Screenshot 20

    The code provided by our colleague should be working only when the form is viewed on mobile devices. If you still need any assistance with your form, please let us know. We will be happy to assist. 

  • MCCJAY
    Replied on February 12, 2017 at 3:19 PM

    Hello,

     

    Yes, I do need additional help on this. Is there a different CSS code I need to use to make sure my button is centered when viewing on a desktop?

     

    Worst case: Can anyone tell me what codes need to be removed/add so it is centered on a desktop and not on mobile? I would like it to be centered on both mobile and desktop but if I had to pick I would go for desktop for now.

     

    Thank you

  • Elton Support Team Lead
    Replied on February 12, 2017 at 7:27 PM

    I've fixed it for you. Kindly check your form now https://www.jotform.com/63656033912152

    Buttons are now centered on desktop and on mobile. I've also fixed the display of your phone on mobile.