How to make the Matrix Dynamique widget a mobile responsive

  • lriwanski
    Asked on April 6, 2018 at 8:07 PM

    Is this possible?

    Page URL: https://form.jotform.com/80885093784168
  • John_Benson
    Replied on April 7, 2018 at 4:25 AM

    Please give me more time to check your form and provide you a custom CSS code to adjust the width of the widget.

    I will contact you again on this thread once I have any updates. Thank you.

  • John_Benson
    Replied on April 16, 2018 at 3:45 AM

    Sorry for the late response.

    Please test the demo form first before making any changes to your original form: https://form.jotform.com/81051340409951

    If the demo form is working properly after testing it, please follow this screencast guide on how to add the custom CSS codes below:

    1523864276css 21 Screenshot 10


    Add this to the CSS form tab:

    iframe#customFieldFrame_82 {

    width: 100% !important;

    }


    Add this to the WIDGET CSS tab:

    @media only screen and (max-width: 40em)

    {

    input#input_c0 {

    width: 100% !important;

    }

    input#input_c1 {

    width: 100% !important;

    }

    input#input_c2 {

    width: 100% !important;

    }

    }

    Here's the result using the Preview feature of the Form Builder:

    1523864674c22ca Screenshot 21

    I hope this helps. Thank you for your patience.