Form is not mobile responsive

  • Aneclan
    Asked on March 17, 2017 at 1:47 PM

    Boa tarde, como faço para deixar meu formulário responsivo? Pois quando vou usa lo no celular alguns campos ficam cortando e desaparecem.

  • John_Benson
    Replied on March 17, 2017 at 4:25 PM

    I was able to replicate the issue. The Input Table is not responsive. Please give me more time to work on this issue. I will contact you once I have a solution. 

    Thank you for your patience.

  • John_Benson
    Replied on March 17, 2017 at 8:05 PM

    Thank you for waiting. Please try the following steps to fix the responsive issue:

    1. In Form Builder V4, please insert the Mobile Responsive widget at the bottom of the form, below the Submit button. Here's a guide on How-to-Add-a-Widget-to-your-Form.

    Form is not mobile responsive Image 1 Screenshot 60

    2. Go to the "Advanced CSS Designer" by clicking the "Form Designer" button at the right side.

    Form is not mobile responsive Image 2 Screenshot 71

    3. In the Form Designer, scroll down and you'll see the "Advanced CSS Designer" button. Please click it.

    Form is not mobile responsive Image 3 Screenshot 82

    4. In the Advanced CSS Designer, go to the "CSS" tab and paste this code:

    Form is not mobile responsive Image 4 Screenshot 93

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-textbox {
    font-size : 0.6em !important;
    }

    .form-matrix-row-headers, .form-matrix-column-headers {
    font-size : 0.5em !important;
    }

    .form-matrix-values {
    padding-left : 2px !important;
    padding-right : 2px !important;
    }

    /*-first column width-*/
    .form-matrix-values .form-textbox {
    width : 40px !important;
    }

    /*-2nd column width-*/
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 40px !important;
    }

    /*-3rd column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 40px !important;
    }

    /*-4th column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 40px !important;
    }

    /*-5th column width-*/
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width : 40px !important;
    }

    }

    5. Save the form and verify the changes.

    Here's the result:

    Form is not mobile responsive Image 5 Screenshot 104

    Hope that helps. If you need further assistance, please let us know. Thank you.

  • jdean987
    Replied on April 7, 2017 at 6:31 PM

    @John_Benson - thanks for this!  My mobile form went from GAH!! to GREAT! ;)