How to display your Radio and Check buttons Inline?

Making long lists of choice for your visitors with radio and checkbox buttons can unnecessarily create long forms. A nice trick for this is to display them inline.

Manipulating the Weebly Form

All of the modifications will happen from within our CSS.

First of all we will need to make sure that our Weebly form can reach the full width of the content on our page we are using it on, therefor we will have to apply a new value to the form field width, by adding the following inside of our CSS:

 .wsite-form-field {
     max-width: 100%!important;
}

When adding this to the CSS the first thing you might see is that your form fields will extend, huh?! This will include for all of your fields, we could start adding code for every other field separate in our CSS and specify the widths of it, but for this tutorial I will only focus on the radio and checkbox buttons, in case you don't like to have the remaining fields displayed in full width, the use of a multicolumn could come in handy, or what was used to know as a COLUMN element, now we simply have to drag elements beside each other and the column gets generated.

Now that we allowed our fields to extend to more width we have to apply some additional codes so our options are being displayed inline.

.form-radio-container, .wsite-editor .form-radio-container {
     display: inline-block!important;
     margin: 7px 15px!important;
}

And the result of the form looks as follow:

If we would want to give fixed widths to our radio fields, so that let's say for example we would have 5 in a row, we could apply the following code:

.form-radio-container, .wsite-editor .form-radio-container {
     display: inline-block!important;
     margin: 7px 0px!important;
     width: 19%;
}

Click and View result above

Note that the width has been set to 19% instead of 20%, which would be 1/5 of our full width, the reason is that inline elements create a little margin from itself, which can be attacked several ways, but only two can be used in our Weebly case, which would be 1 set the parent div to a font-size 0, or simply giving it a width a little less, agreed this would never center it 100% accurate, but at least this will work cross browser.
A good article to read about this and its 'solutions' can be found here: READ ARTICLE

Tweak created by and for Stew.
Got any suggestions, or requests? Something what you would like to see on the site, fill out the form and we will see if we can find a solution for your problem.