How to make the Matrix Dynamique widget a mobile responsive

  • Profile Image
    lriwanski
    Asked on April 06, 2018 at 08:07 PM
  • Profile Image
    John_Benson
    Answered on April 07, 2018 at 04: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.

  • Profile Image
    John_Benson
    Answered on April 16, 2018 at 03: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.gif


    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.gif

    I hope this helps. Thank you for your patience.