How to customize the Matrix field using CSS codes?

  • Profile Image
    Asked on March 03, 2016 at 04:13 PM


    I used the Matrix tool with the text box input type. 

    1. Can I control the length of the text box to make it bigger?  How can I edit?

    2. The row headings have a lot of empty space after them on the iphone or other devices and the text boxes are all very small.  How can I edit for mobile?

    Thank you

  • Profile Image
    Answered on March 03, 2016 at 05:46 PM

    Please, inject this CSS code:

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

            .form-matrix-row-headers {

                width: 10% !important;

                word-break: break-all;

                min-width: 0px !important;



    This should be your result:

  • Profile Image
    Answered on March 04, 2016 at 09:45 AM
    Thank you that worked!
  • Profile Image
    Answered on March 04, 2016 at 11:41 AM

    On behalf of my colleague Kevin, you're welcome, we're glad it worked for you.

    Do not hesitate to contact us in future for any issue.

    We'll be more than happy to help you.

    Best regards.