CSS code to correct overlaping and text align on radio buttons?

hello I found on the forum a css code to avoid overlapping

.form-radio-item label {

    white-space: normal;

    margin-left: 30px !important;

    text-indent: 0px !important;

}

the result is there:

2 questions,

can I reduce the space between buttons and text (highlighted in red) ?

can I align the rest of the text to the first part of text (highlighted in blue) ?

if my items could look like this for ex would be perfect:

O   Handicapés
      mentaux

Thanks for your help

Philippe

Perhaps this would work for you:

Your form has a lot of space horizontally so instead of moving some text in a new line, I just expanded the radio button field. 

You can replace the current CSS code you have with this one:

/*You can adjust the margin-left here*/

.form-radio-item label {

    white-space : normal;

    margin-left : 10px !important;

    text-indent : 0px !important;

}

/*This will automatically adjust based on the form's width*/

#id_22, #cid_22 > div {

    width: 100% !important;

}

/*Here you can set the width of each radio button*/

span.form-radio-item {

    width: 250px !important;

}

Let us know if that works.

yes it works but it alters the entire form 

is it possible to design one per form item?

Yes, it is indeed possible, first you will need to get the ID of the specific field you want to affect with this CSS code. 

Right click on the field and select the inspect option, once there search the <li> related to the field you want to affect and copy the ID. 

Then you only need to add it to the given code above, the first and last portion of codes affect currently all the fields in your form, so the code you should use for an specific field should be like this one: 

/*You can adjust the margin-left here*/

#id_22 .form-radio-item label {

    white-space : normal;

    margin-left : 10px !important;

    text-indent : 0px !important;

}

/*Here you can set the width of each radio button*/

#id_22 span.form-radio-item {

    width: 250px !important;

}

If you have any question, let us know.