Form not viewed correctly in the mobile

  • naggar
    Asked on November 28, 2016 at 9:28 AM
    an you please help fix it on both desktop and mobile view as well to be the same as this one after it was fixed.

     

    https://form.jotform.me/naggar/sdec-enquiry-form

     

    http://www.saudidiesel.com/rental-enquiries

  • Kiran Support Team Lead
    Replied on November 28, 2016 at 10:09 AM

    I have checked your JotForm in a mobile emulator and seems to be displaying correctly. Please see the screenshot below:

    Form not viewed correctly in the mobile Image 1 Screenshot 20

    Could you let us know if there is any specific field that is not displaying so that we can assist you further? Let us know if you are referring something different. We will be happy to assist. 

  • naggar
    Replied on November 28, 2016 at 11:59 PM

    Dear Kiran, 

     

    The form fields need to all be the same length for both the regular and mobile view, currently they are not.

    - Your Name Field

    - Drop Down Menus

     

    Hope this clarifies. Thanks in advance. 

     

    Form not viewed correctly in the mobile Image 1 Screenshot 20

     

    Kind Regards, 

  • naggar
    Replied on November 29, 2016 at 12:09 AM

    Your message box, should come underneath the "your message" text as well not next to it. 

     

    Form not viewed correctly in the mobile Image 1 Screenshot 20

     

    Kind Regards, 

  • Chriistian Jotform Support
    Replied on November 29, 2016 at 1:42 AM

    Hi,

    I'm currently checking the form. Please allow me some time to further investigate to provide the proper CSS on your form. I'll get back soon once I've found a solution.

    I have moved your second question in this thread: https://www.jotform.com/answers/999534. We will address your question there shortly.

    Regards

  • Chriistian Jotform Support
    Replied on November 29, 2016 at 4:22 AM

    Can you please add this custom CSS in your form and see if this works?

    .form-textbox {

        width : 250px !important;

    }

    .form-dropdown {

        width : 100% !important;

    }

    div#cid_8 {

         width : 90% !important;

    }

    div#cid_12 {

         width : 90% !important;

    }

    div#cid_33 {

          width : 90% !important;

    }

    div#cid_37 {

          width : 90% !important;

    }

    div#cid_10 {

          width : 90% !important;

    }

     

    Do let us know if you need further assistance.
    Regards

  • naggar
    Replied on November 29, 2016 at 5:07 AM

    Dear Christian, 

    Thanks for your feedback. 

    I applied the code to the form and it's completely distorted now, so I'm going to revert it to it's original version. Can you please go over the whole form as a whole and try it out and give me the code in bulk instead of different codes to avoid any errors, thank you. 

     

    Kind Regards. 

     

     

    Form not viewed correctly in the mobile Image 1 Screenshot 20

  • Boris
    Replied on November 29, 2016 at 6:18 AM

    From what I understand based on your description, you want all your form fields to have the same width - to take full available width of your form. If that is correct, simply inject the following custom CSS into your form:

    .form-textbox,
    .form-textarea,
    .form-dropdown,
    .form-input,
    .form-input-wide,
    [data-type="control_fullname"] .form-sub-label-container {

        width: 100% !important;
        max-width: none !important;
    }

    The following guide describes how:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    This would make your form appear like this on desktop:

    Form not viewed correctly in the mobile Image 1 Screenshot 30

    And like this on a mobile device:

    Form not viewed correctly in the mobile Image 2 Screenshot 41

    Please try it out, and let us know should you need further assistance.

  • naggar
    Replied on November 30, 2016 at 12:19 AM

    Thank you Boris, this did solve my concern on all devices, can you please assist Owen for the other form as well. 

    Thanks again.

    https://www.jotform.com/answers/998708-How-to-fix-text-alignment-and-form-look#25

     

    Kind Regards, 

  • Mike_G JotForm Support
    Replied on November 30, 2016 at 3:28 AM

    I have already provided an answer to the other thread. Please check that thread and let us know there if we can help you any further.

    Thank you.