My embedded form not displaying properly on mobile

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

    Hello,

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

     

     

  • Elton Support Team Lead
    Replied on March 24, 2017 at 4: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:

    My embedded form not displaying properly on mobile Image 1 Screenshot 20

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

    Hope this helps!

  • art_crate
    Replied on March 31, 2017 at 4:25 AM

    Fantastic, thank you!