Is there a way to make "matrix" questions more mobile-friendly?

When the screen is smaller, matrix questions do not cleanly cut the line break at the beginning or end of a word. Instead, it breaks mid-word and becomes very hard to read (see screenshot). Is there a trick to fixing this, or is that just how it is for matrix questions? 

Hi,

 You can use this code in order to fix the matrix into a smaller screen such as phone.

.form-matrix-column-headers {

    word-break: break-word;

    width: 35%;

}

Could you try to inject the CSS code below? At that time, it will work as expected.

@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-matrix-column-headers {

    word-break: break-word;

 min-width: 40px !important;

}

 .form-matrix-row-headers {

    word-break: break-word;

  min-width: 40px !important;

}

 .form-matrix-table {

        max-width : 620px !important;

    }

}

Here is how it works on my side:

If this does not resolve the issue, please let us know and we will be glad to take another look.

Hi there,

I'm sorry for waiting so long to respond, but this fix doesn't seem to do it. I used matrix questions all of the time and seem to keep seeing the issue. Just tried using the custom CSS you had shared in this form: https://form.jotform.com/62215919178159 and I see the same issue:

Actually both replies are OK, I would only suggest changing them slightly. Specifically, you should change this:

word-break: break-word;

to:

word-break: keep-all;

That is if I understood you correctly and you want to stop the words from breaking and have the text brake only on spaces.

It is good to note however that longer matrix fields will require a scroll to happen as they can not shrink in such way that will allow you to keep unbroken words and the required width to show the matrix table properly (this is the downside of long matrix fields)