Align "Other" Button with my form fields using CSS

I'm experiencing a layout issue with the "Other" option when using multi-column radio button fields on my form. The "Other" option currently spans the full width of the form, even when the rest of the options are displayed in two columns. This is especially noticeable when there is an odd number of options above it. I would like the "Other" option to fit neatly into the two-column grid, like the other radio buttons, even when there is an odd number of options.

I've attempted to apply custom CSS using the selector .form-radio-other, but it doesn't seem to align with the grid like the other options. Here’s what I’ve tried so far:

.form-multiple-column .form-radio-other {

 display: inline-flex !important;

 width: calc(50% - 5px) !important;

 margin-left: 5px !important;

 margin-bottom: 5px !important;

 height: auto !important;

 justify-content: center;

 align-items: center;

}

Hi Catherine,

Thanks for reaching out to Jotform Support. I checked your form but couldn't seem to identify multi-column radio button fields you're referring to. Are you referring to the Single Choice field option shown in the screenshot below?

If so, we can fix this using a set of CSS codes. Let me show you how:

1. First, copy this code:

/* other option on single choice field, set min width - 26976541*/

.formRadioOther {

      min-width: 50%;

}

/* Ends here */

2. Next, in Form Builder, click on the Paint Roller icon on the right and click on the Styles tab on the Form Designer menu.

3. Then, scroll down to the Inject Custom CSS box and paste the codes there.

This is how it would appear:

We also have a guide on How to Inject Custom CSS Codes that you can check out. If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better? You may also share a screenshot of what you're referring to we can generate a code you can use.

Give it a try and let us know if you need any help.