My embedded form not displaying properly on mobile

  • Profile Image
    art_crate
    Asked on March 23, 2017 at 11:45 PM

    Hello,

    I enabled the mobile widget, however my form is not displaying responsive.

     

     

  • Profile Image
    EltonCris
    Answered on March 24, 2017 at 04:23 AM

    You have injected CSS codes in your form that breaks the responsiveness of the form. You have to inject again another CSS codes to reset those styles when the form is viewed on mobile.

    You can use the following:

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

    #id_141, #id_142, #id_143, #id_87, #id_90, #id_150, #id_151, #id_152, #id_155, #id_156, #id_157 {margin-left: 0 !important;}

    .form-address-table {margin-left: 36px !important;}  

    #input_145_donation {margin-left: 0 !important;}

    [data-type="control_stripe"] .form-address-table { margin-left: 0 !important;}

    }

    Result:

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

    Hope this helps!

  • Profile Image
    art_crate
    Answered on March 31, 2017 at 04:25 AM

    Fantastic, thank you!