looks different on mobile devices

  • Profile Image
    supersnapz
    Asked on October 19, 2015 at 08:45 AM

    hey my form:

     

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

     

    looks fine on when viewing it on a computer.  But i've looked at it on my iPhone and iPads and it looks either a lot longer and wider than the original, or else the bottom of the form is cut off (iPad mini and air)

    I used iframe to embed it as I build my website using Everweb

  • Profile Image
    beril
    Answered on October 19, 2015 at 11:01 AM

    Hi,

    You need to make your form Responsive. It is possible with JotForm.

    Please check the user guide on how to make forms mobile responsive

    In addition to that, if it doesn't work, please add the code below to your CSS.

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

    .form-line{

    width: 100%;    

    }

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 75% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

     

    }

    Here is how to do this:

    1) Click on Setup & Embed.

     

     

    2) Click on Designer.

     

    3) Click on CSS.

     

    4) Copy & paste the code above to CSS.

    5) Click on Save button.


    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.