Make form Mobile Responsive

  • Profile Image
    ISC_India
    Asked on December 17, 2015 at 03: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:)

  • Profile Image
    Chriistian
    Answered on December 17, 2015 at 04: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.

  • Profile Image
    ISC_India
    Answered on December 17, 2015 at 04: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

  • Profile Image
    Chriistian
    Answered on December 17, 2015 at 05: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.

  • Profile Image
    ISC_India
    Answered on December 17, 2015 at 05:14 AM

    Thanks a lot!

    It works now, really appreciate your help here.

     

    Cheers

  • Profile Image
    beril
    Answered on December 17, 2015 at 08: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.