Make form Mobile Responsive

  • ISC_India
    Asked on December 17, 2015 at 3:50 AM

    Hi,

    I have used the widget, however, the column headers of the matrix table of my form (https://form.jotform.me/53481063278458?) are still not fixed when viewing on mobile.

     

    Help please..

    Thanks:)

  • Chriistian Jotform Support
    Replied on December 17, 2015 at 4:06 AM

    Hi,

     

    Can you try to add this custom CSS code in your form to fix the issue?

    @media screen and (max-width: 480px){

    th.form-matrix-row-headers {

    width: 20% !important;

    }

    td.form-matrix-values {

    width: 20% !important;

    }

    }

     

    To add/inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.
    Regards.

  • ISC_India
    Replied on December 17, 2015 at 4:37 AM

    Appreciate your prompt support!

    I tried that, and it has surely improved the mobile viewing. There is still some minor issue with the row & column headers (few words have end alphabets carried over to below line). If that be ironed out, it would be great!

    Thanks

  • Chriistian Jotform Support
    Replied on December 17, 2015 at 5:04 AM

    Hi, 

     

    Can you try to add this custom CSS code in your form so that the header label of your matrix will be wrapped by word?

    .form-matrix-row-headers, .form-matrix-column-headers {

        word-break: normal !important;

    }

     

     

    Do let us know if you need further assistance.
    Regards.

  • ISC_India
    Replied on December 17, 2015 at 5:14 AM

    Thanks a lot!

    It works now, really appreciate your help here.

     

    Cheers

  • beril JotForm UI Developer
    Replied on December 17, 2015 at 8:22 AM

    On behalf of all our colleague, you are kindly welcome. :) We are very glad to hear that the issue has been resolved for you.

    If you require any further information, feel free to contact us. We will be happy to assist you.