My form doesnt show correctly in smartphone

  • Profile Image
    danycky
    Asked on May 10, 2013 at 04:04 AM

    When I try to see my form in a smartphone, the form doesnt show all its fields. How can I fix it?

     

  • Profile Image
    moonzkie
    Answered on May 10, 2013 at 06:54 AM

    Hi,

    I was able to replicate on the said problem. Can you please try to embed your form using iFrame instead? Here is a guide how you can embed your form using iFrame: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Please let us know if this works for you.

    Thank you.

  • Profile Image
    danycky
    Answered on May 10, 2013 at 07:43 AM

    I try to embed my form using iFrame, but the form still showing bad... Im using Wordpress..

  • Profile Image
    jonathan
    Answered on May 10, 2013 at 09:19 AM

    Hi,

    Please try this CSS code instead. 

     

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

    .form-address-table{width:260px;}

    .form-address-line{width:240px;}

    .form-address-city, 

    .form-address-state{width:110px;}

    .form-subHeader, 

    .form-header {margin: 5px;}

    l

    .form-label-left {width: 300px !important;}

    #id_24{width: 280px !important;}

    .form-subHeader{width: 280px !important;}}

    .form-label-right {

    width: 100px !important;

    }

    Please inform us if it does not make any difference.
    Thanks.
  • Profile Image
    danycky
    Answered on May 10, 2013 at 09:42 AM

    :(   doesnt show the fields correctly after write the CSS code

  • Profile Image
    Welvin
    Answered on May 10, 2013 at 11:39 AM

    Hi,

    Can you please try it again? I have adjusted your form fields a little. 

     

    Thanks

  • Profile Image
    danycky
    Answered on May 10, 2013 at 11:45 AM

    Its the same....doesnt show correctly in smartphone   :(    

  • Profile Image
    jefreylandicho
    Answered on May 10, 2013 at 01:04 PM

    Please inject the CSS code below in your form styles Inject Custom CSS textarea.

    @media only screen

    and (max-width : 320px) {

    .form-all, .form-input,.form-header-group,.form-line,textarea { width: 97.5% !important; }}

    Kindly let us know if you are still having trouble seeing your form in smartphone after adding the CSS code above in your form styles.

  • Profile Image
    danycky
    Answered on May 11, 2013 at 02:27 AM

    Nike!!  Now show ok!  Thanks a lot

  • Profile Image
    gori-mathew
    Answered on May 11, 2013 at 02:31 AM
    On behave of my colleagues you are welcome, do feel free to contact us wherever you need our assistance.