How do I style checkboxes and radio buttons so that they're stacked instead of wrapped?

Overview

If you inspect a radio button in your Clive form, you can see the radio inputs are wrapped in label elements under a div element with the class clive-radiobuttons.

You can add the following to your site's CSS file to display those label elements as block elements instead of inline elements:

.clive-radiobuttons > label {
  display: block;
}

If your form already includes spacing between radio buttons or checkboxes, you may also need to remove the default horizontal margin so the stacked layout aligns correctly.

.clive-field-wrapper .clive-radiobuttons > * + *,
.clive-field-wrapper .clive-checkboxes > * + * {
  margin-left: 0px !important;
}

Here is what the radio buttons look like as a result:

If your field contains checkboxes, you can target the clive-checkboxes class instead:

.clive-checkboxes > label {
  display: block;
}