Form not viewed correctly in the mobile

  • Profile Image
    naggar
    Asked on November 28, 2016 at 09: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

  • Profile Image
    Kiran
    Answered 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:

    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. 

  • Profile Image
    naggar
    Answered 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. 

     

     

    Kind Regards, 

  • Profile Image
    naggar
    Answered on November 29, 2016 at 12:09 AM

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

     

     

    Kind Regards, 

  • Profile Image
    Chriistian
    Answered on November 29, 2016 at 01: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

  • Profile Image
    Chriistian
    Answered on November 29, 2016 at 04: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

  • Profile Image
    naggar
    Answered on November 29, 2016 at 05: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. 

     

     

  • Profile Image
    Boris
    Answered on November 29, 2016 at 06: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:

    And like this on a mobile device:

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

  • Profile Image
    naggar
    Answered 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, 

  • Profile Image
    Mike_G
    Answered on November 30, 2016 at 03: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.