Display radio in 4 columns

Hi @charlienerdica

I hope you are doing well today.

Your form ID is 11. That is a useful info from page source which will help us with CSS code.

First, edit your form and add this custom class to your radio field: columns4forminator. You can do that in the Styling tab of that field.

Also, in Settings tab of that radio field change Layout from Vertical to Horizontal.

In the end add this code to WP Dashboard -> Appearance -> Customize -> Addtitional CSS:

@media all and (min-width:782px) {
#forminator-module-11 .columns4forminator .forminator-radio-inline {width:20%;}
}
@media all and (min-width:320px) and (max-width: 782px) {
#forminator-module-11 .columns4forminator .forminator-radio-inline {width:100%;}
}

Kind Regards,
Kris

Thanks! Worked perfectly, looks just like I wanted.

But now the input field are the same width, how to control this?

Hi @charlienerdica

Can you be more clear about your 2nd query? Do you want each column to have different width?

Please note that I used 20% as each label has own paddings and margins. If those will be 0 then my code will say 25%. So that 5% is reserved for those paddings and margins which exist there.

Kind Regards,
Kris

The cover the whole page in width now.

Hi @charlienerdica

The code I have shared covers 4 columns, no matter how large is the main container on your site, apart from this code:

@media all and (min-width:320px) and (max-width: 782px) {
#forminator-module-11 .columns4forminator .forminator-radio-inline {width:100%;}
}

which says that labels should be displayed one by one in 1 column below 782px width.

Now there are 2 ways of making some improvements for the thing you ask.

1st one is to make static width for those labels and that will reduce each column width.

2nd one is to simply close form shortcode in a div tag with some static width. For example this one:

<div style="width:1000px;">FORMINATOR SHORTCODE HERE</div>

Of course, play around 1000px value and see which one will be the best for you.

Kind Regards,
Kris

Not sure that we are talking about the same thing, I was unclear. I mean the date-field and calc-field.
The columns are perfect!

Hi @charlienerdica,

I hope you are doing well today!

Thanks for the clarification. Please try adding the following CSS code to achieve this.

#forminator-module-11 .forminator-row #calculation-1, #forminator-module-11 .forminator-row #date-1 {
    max-width: 180px !important;
}

Please note that you can also try with % and vw values instead of px to fix the maximum width of the fields.

Kind regards,
Zafer

Thanks, worked like a charm!