Why does the format change when looking on a mobile device?

  • Profile Image
    centrafoods
    Asked on January 17, 2011 at 12:28 PM

    Online the Jot Form looks beautiful, but when I look on my iPhone or iPad the formatting of the Jot Form changes.  It moves all of the text boxes underneath the headers rather than to the right of the headers.

    Any suggestions?

     

    Thank You!

  • Profile Image
    aytekin
    Answered on January 18, 2011 at 09:11 AM

    Yes, that's the mobile optimized version of the forms. The labels are top aligned so that the forms fit well on the small screen of the mobile devices. 

    If you do not want the forms to be changed on mobile devices, you should use the full form source code on your web page. It is the code you get when you click on "Source" icon on the "Embed Form" button on form builder toolbar. 

  • Profile Image
    centrafoods
    Answered on January 19, 2011 at 09:28 AM

    Thank you for the response!

    We've tried what you suggested and it looks exactly the same on a mobile devise as it did before.

    Is there something in the code that we can modify to make sure the jot form does not show the optimized version on mobile devises?

  • Profile Image
    aytekin
    Answered on January 19, 2011 at 10:19 AM

    Did you put the full form source code on your own web site? Not the short version? Can you post the URL of the page? 

  • Profile Image
    centrafoods
    Answered on January 19, 2011 at 02:00 PM

    Yes, we put the full source code on the page.  Below is the URL:

    http://www.bulkoliveoils.com/contact.html

  • Profile Image
    aytekin
    Answered on January 20, 2011 at 08:08 AM

    Beautiful site!

    Sorry, my mistake. It is not possible to disable the mobile version on full source code. The change is needed in the zipped version of the form source code. You would need to download it and change the form.css.

     

    This also should not happen on iPad. It should only happen on iPhone. 

    I opened this form on iPhone. I think this way it is more useful. When you double click on the form and zoom on it. You see questions below each other. This makes it much easier to complete the form. 

     

  • Profile Image
    centrafoods
    Answered on January 20, 2011 at 10:28 AM

    Thank you for the update!

    What changes need to be made to the form.css file?  Is there a way to get a modified form.css file with the changes your referring to?

  • Profile Image
    aytekin
    Answered on January 20, 2011 at 10:33 AM

    Find this line on form.css and remove it and all the lines below it. 

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

  • Profile Image
    centrafoods
    Answered on January 20, 2011 at 03:15 PM

    Success!  Everything formatted like we wanted.

    Thank you for your help!  You guys are the best!

  • Profile Image
    guystalkingff
    Answered on October 27, 2011 at 03:15 PM

    i need to do this also how do i do it? please help where is form.css?

  • Profile Image
    guystalkingff
    Answered on October 27, 2011 at 03:32 PM

    i am doing mine in iweb how do i do this thanks?

  • Profile Image
    fxr
    Answered on October 27, 2011 at 06:54 PM

    erics1019/guystalkingff , We are aware of your query in your own thread and it will be dealt will as soon as we can, thanks. 

  • Profile Image
    guystalkingff
    Answered on October 31, 2011 at 06:17 AM
    How do I do that with iWeb?



  • Profile Image
    henriklorange
    Answered on September 20, 2012 at 03:23 AM

    Sorry, but just doing this without informing us users is not good. At least it should be an option to generate iphone-specific css. There are several other references to this problem in JotForm pages, and none mention this. 

  • Profile Image
    idarktech
    Answered on September 20, 2012 at 08:38 AM

    @henriklorange

    Thanks for your input, we appreaciate it.

    The codes defined by Sir Aytekin is a fix for mobile views. We admit that some users like it and some does not but they'll be improving this for each and every kind of questions/feedback from every form users. I'll inform our higher team regarding this. Hopefully there will be new updates about this in the near future.

    Have a great day!

  • Profile Image
    aytekin
    Answered on January 22, 2013 at 03:26 AM

    Update: We are now allowing @media inside Inject Custom CSS.