Mobile site optimization problems

  • Profile Image
    cchl
    Asked on August 07, 2014 at 11:42 AM

    I used the mobile optimizer widget on my form "CCHL Inquiry Form." It works partially. The form enlarges for my iPhone but does not resize to fit the screen after the user finishes inputting to the fields, so it's hard to find the "send" button without wandering around the page. Is there a better widget or a better way to handle this?

     

    I would like the user to input to the fields and when they say they're "done" and the keyboard retracts on the phone, that the page resizes back to original so the "send" button is easy to locate.

     

    THanks!

    Elizabeth

  • Profile Image
    david
    Answered on August 07, 2014 at 01:27 PM

    Hi,

    If the formatting for the widget is not what you are looking for, you can use mobile responsive CSS instead and customize that.  Here is our guide on how to inject CSS to your form:

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

    and here is the code you would use for mobile responsiveness:

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_1.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

    This will force formatting for mobile browsers but you can change the values to make sure your form fits mobile screens the way you would like.

    If you have any trouble setting this up, or this still does not allow you to have your form look the way you would like in mobile, let us know and we will be happy to assist you futher.

    Thank you for using JotForm!