Change column widths of the matrix table when viewed on mobile

Thank you kindly for responding to my previous request and making the relevant amendment to the format of my table.  Unfortunately, although the table now looks how I want it to on tablet and desktop view, when viewed on a smartphone device, the table format is still not correct.

I hope you can correct this for me as you did my previous request

Please add the following CSS to your current custom CSS.

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

screen and (max-device-width: 767px) and (orientation: portrait),

screen and (max-device-width: 415px) and (orientation: landscape) {

  .form-matrix-row-headers {

    min-width: 5px;

    width: 5px;

  }

  .form-matrix-row-headers + .form-matrix-values {

    width: 70%;

  }

}

Thank you for your reply, however the issue doesn't seem to be resolved when I preview the form as viewed from a mobile device.  Please see screen shot for reference.

Thank you for your assistance

Kevin

When in the landscape orientation it looks fine, but not in portrait.  Also, the sliding scale (0-10) don't seem to be correctly formatted on the portrait orientation.

You may inject the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

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

    width: auto !important;

}

.form-matrix-row-headers {

    min-width: 0px !Important;

}

}

Result:

Let us know if you need more help.