Make form mobile responsive.

  • Profile Image
    Don 
    Asked on September 05, 2016 at 09:48 AM

    Is that responsive??? I did mark responsive in the STYLE as you recommended 

  • Profile Image
    Chriistian
    Answered on September 05, 2016 at 10:53 AM

    Hi,

    I believe you are referring to the form http://www.jotform.us/form/62483799767176. Unfortunately, I was not able to replicate the problem. Here's is what it looks like in iPhone5 on my end.

    Please try clearing your browser's cache to view a new copy of the page. If you are referring to a different form, please give us the URL so we can check.

  • Profile Image
    MCO22
    Answered on September 05, 2016 at 11:45 AM
    Thanks. It looks bad and outdated. Far from "responsive" look at the "First
    name" which seems to be belonging to the second line.
    ...
  • Profile Image
    Chriistian
    Answered on September 05, 2016 at 12:11 PM

    I checked the form on chrome emulator but http://www.jotform.us/form/62483799767176 I was not able to replicate the issue you are reporting.


    Have you tried clearing your browser's cache and see if this will help fix the issue? Also, please try to view your form in an actual mobile device and see if the issue still persists.

  • Profile Image
    MCO22
    Answered on September 05, 2016 at 12:45 PM
    It looks unclear and.... bad in your expample. That is what I meant.
    ...
  • Profile Image
    BDAVID
    Answered on September 05, 2016 at 01:41 PM

    So, you do not want the first and last name boxes in two lines? If that is the case, inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    #cid_23 span{

    width: 49% !important;

    }

    }

    Result:

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    MCO22
    Answered on September 05, 2016 at 02:45 PM
    I am merely pointing out that the visual is outdated. The label field is
    not even aligned with the field input. Your designers should see that.
    ...
  • Profile Image
    BDAVID
    Answered on September 05, 2016 at 03:05 PM

    It looks like  the form you are using was cloned from a template that was shared by another user. The form has its own CSS that might be conflicting with the default code that gets activated through the responsive feature. That's why sometimes it is necessary to add some custom CSS to make it look nice on mobile views.

     

    So, if you need help, you can share screenshots to point out the the parts that need the some adjustment. We will be glad to assist you.