Quick Tip: Spacing Between Radio Button Options Tutorial

When creating a radio button question, usually the label or text of each option is very short and only takes up a single line. However, if you have larger descriptions for each radio button option, you can have multiple lines of text related to a single radio button.

Sometimes you would want to manually force more spacing between all of your radio buttons, regardless of the number of lines. Be aware, this fix effects all radio button questions equally. However, this can be accomplished with a simple adjustment to the Distribute-->Default Theme section of your survey.

Making changes to Look & Feel

• Go to the Project tab-->Distribute-->Default Theme
  
• Select the Advanced tab from the left side
• Choose the Append radio button option
• Add the following code to the newly visible box:

  .sg-type-radio ul.sg-list li {
    margin: 1em 0;
  }

• You can alter the spacing by changing the 1emvalue:

  .sg-type-radio ul.sg-list li {
    margin: 0.5em 0;
  }

• Click Save Changes and you can view your adjustments in Preview

Have questions? Want to comment on this? Join the discussion on our SurveyGizmo Support site.