Increase the spacing in radio button.

  • Profile Image
    Asked on May 17, 2016 at 10:06 PM

    I have a section with radio buttons, 5 choices.  I'd like them to me spread in one row.  If I select 5 columns in preferences they are spaced very close together.  I've seen similar questions that recommended inserting the following CSS code: 

    .form-multiple-column .form-radio-item {

    width: 200px !important;


    When I tried that it stacked the choices vertically rather than horizontally in 5 columns.  I tied 100 as well.

    Any suggestions?

  • Profile Image
    Answered on May 18, 2016 at 02:46 AM

    To resolve the issue, please select 5 columns in the preferences again. Then inject the custom css below to add more space to each radio button.

    li#id_50 {

        width: 100%!important;


    div#cid_50 {

        max-width: 700px!important;


    Make sure that label align is set to top to display the row correctly.

    The column should now look like the image below.

    If you need further assistance, please let us know.