How to make input field mobile responsive?

Managed to get our form looking great except for the input field product matrix we have created. It not so great on a mobile device. The form cuts off at size small and you cannot scroll or tab across on a mobile device. Any help?

While I'm at it any suggestions on how I can change the column width on the first two columns?

Please get the CSS Code here: https://pastebin.com/raw/F3xfccwZ and inject it to your form.

Guide: How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.

Also, please tell us the device you are using so we can check it with the same.

Thanks for that. I gave that a go and it's better, but still not ideal. Attached are a couple of screenshots from an iPhone in portrait and landscape. Is it possible to swipe left to reveal the additional sizes rather than the current coping out to keep the screen width?

Do you mean to keep the width of text boxes and just allow the scroll to left? Please check this demo form: https://form.jotform.com/91427795297978.

Perfect! That is the answer that I think to best work on a mobile  

Thank you for your reply. If you need further assistance please let us know.

Please replace the CSS code I gave you before with this:

@media only screen and (max-device-width: 480px){
    .form-line {
        padding-left : 0px !important;
        padding-right : 0px !important;
    }
    .form-matrix-column-headers {
        width : 10% !important;
        text-align : left !important;
    }
    th.form-matrix-row-headers {
        width : 10px!important;
    }
    th.form-matrix-column-headers {
    min-width: 60px !important;
    }}

Guide: How-to-Inject-Custom-CSS-Codes