Hi,

I have had multiple tries at formatting a form the way i need - changing the html and CSS.
The best i could get is radio buttons all clustered too close together in the responsive layout version: Please see - www.clsprivateconsulting.com.au/index.ph...=com_rsform&formId=3

Of course, this does not come close to how it should look:
See www.lmtc.com.au/dass.html


How can the responsive formatting be achieved? How do you format - and space out each "individual" radio button - like it was done in the old CSS. For example, old legacy html code may look like:

<tr> /** Legacy html table row to input a users selection **/

<td style="width: 20px;"><strong>Question 1</strong></td>
<td class="myquestion">I found myself getting upset by quite trivial things</td>
<td style="format-the-radio-button"> <input id="radio1" name="radio1" type="radio" value="0" /> </td>
<td style="format-the-radio-button"> <input id="radio2" name="radio2" type="radio" value="1" /> </td>
<td style="format-the-radio-button"> <input id="radio3" name="radio3" type="radio" value="2" /> </td>
<td style="format-the-radio-button"> <input id="radio4" name="radio4" type="radio" value="3" /> </td>

</tr>



Obviously - the following code below does not achieve the formatting of www.lmtc.com.au/dass.html

<td><div>{Q1:caption}</div></td>
<td><div>{Q1:body}<span class="formValidation">{Q1:validation}</span></div></td>

Regards,

Peter



P.S.
example CSS I have tried

table {
border-collapse: collapse;
width: 100%;
}

td {
text-align: left;
padding: 8px;
}

th {
background-color: #4CAF50;
color: white;
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}