Some fields in the form are not responsive on different devices

  • Profile Image
    craftlabph
    Asked on September 23, 2016 at 10:29 AM

    Kindly help me on making my site responsive on different devices. The features that are not responsive so far were:

    • Form Headings

    • Form Separator

    • Form HTML with an IFrame embedded on it.

     

    Thanks

  • Profile Image
    Welvin
    Answered on September 23, 2016 at 12:30 PM

    I'm now checking this and I will let you know later the CSS to adjust the responsiveness of the mentioned elements. 

  • Profile Image
    Welvin
    Answered on September 23, 2016 at 12:39 PM

    Here's a cloned version of your form with the changes on the responsive layouts:

    https://www.jotformpro.com/form/62665186954974

    Instead of the HTML field, I used our PDF Embedder widget (https://widgets.jotform.com/widget/pdf_embedder) to add the PDF file in the form then injected the following custom CSS codes to make the elements responsive on mobile devices:

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

    [data-type="control_widget"] iframe {

    width: 100% !important;

    }

    #cid_87 .form-header-group, 

    #cid_88 .form-header-group,

    #cid_17 .form-header-group,

    #cid_20 .form-header-group,

    #cid_52 .form-header-group {

        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 !important;

    }

    }

    Inject CSS guide:

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

    You can clone the form back for you to see the changes: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    craftlabph
    Answered on September 24, 2016 at 04:09 AM

    It worked! Thank you so much for your help.