Table spacing not working out

I have a form, Jobsite Hazard..., in it there is a table with radio buttons for the various hazard risks. Recently it looks bigger on screen and I lose the right column. I changed it a bit to make it narrower, but to no avail. Now it fits, but it crams up the words in the first column, and makes the radio button columns wider than necessary. I have tried many things, but it is not working for me. Note: it only does this on the phone preview (and my phone too).

Help!

Could you please advise which column you would like to adjust:

The above images are viewed on the phone's resolution.

How would you like to adjust them?

Thank you!

I would like to be able to increase the size of the first column (the text). It seems to smoosh the first column and make the radio button columns too wide. 

Try injecting the following CSS code: 

#id_12 table tr td{

    width: 10px !important;

}

Let us know how it goes. 

Hi,

I tried the above CSS code. I think I put it in the right spot. It does seem to have changed. I cannot understand why it makes the first column so narrow, even breaking up individual words. I tried putting in a nbsp between words, and it just breaks it before the space.

You may try these custom CSS

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{

  th.form-matrix-column-headers

  {

    min-width: 10px !important;
   }

}

Sample Screenshot:

Thanks Richie_P,

Your code got it done.