Horizontal Radio Buttons in a form

https://jeff-howell-sysm.squarespace.com/survey

I am trying to get the radio buttons to be horizontal and not vertical... any help would be appreciated.

Hi Jeff

The radio buttons are normally displayed in a block which means that they each appear on a new line. If we change this to 'inline' they'll appear side-by-side.

When you change this, the buttons appear right beside each other and this can make them difficult to click. You may want to add some additional spacing (margin) between them. I've added 5-pixels as an example, but you can change this or remove it altogether.

This horizontal line of radio buttons will be too wide for smaller displays and so it won't look good. This will affect screen resolutions lower than 1088-pixels wide. I've added a media query to check that screen size. If the screen isn't wide enough, the radio buttons will continue to appear vertically.

Add the following to Design > Custom CSS:

    /* When viewport is 1088 pixels minimum */
   @media only screen and (min-width: 1088px) {
     .form-wrapper .field-list .field .option {
       /* Show radio buttons side-by-side */
       display: inline;
       margin-right: 5px;
   }
}

Paul

To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer. You'll find some more free Squarespace tips on our website.

That is perfect. Thank you so much, @Paul2009. My coding skills are a littel rusty.

That is perfect. Thank you so much, @Paul2009. My coding skills are a littel rusty.

Thank you. Enough to guide me to do exactly what I wanted to do.