Tutorial: Quick Tip: Alignment of Radio Button Options

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.

This radio button, by default, is centered vertically with the label or text to the right. However, for some respondents, it may be better to align the radio button to the top of the option text. This can be accomplished with a simple adjustment to the Look & Feel section of your survey.

Making changes to Look & Feel

• Scroll down to the large box titled This Theme’s CSS Template
• You will find the following code about 2/3rds of the way down:

  table.sg_Table  td {
         vertical-align:middle;
  }

• You will want to change the vertical-align:top;. The results:

  table.sg_Table  td {
         vertical-align:top;
  }

• Click Save Your Customizations

That’s it! If you wanted to align the buttons to the top of the text rather than the middle, consider checking out the Quick Tip: Spacing Between Radio Button Options.

If you have any further questions, feel free to check out our forums and contribute to the community!