Jump to content

Horizontal Radio Buttons in a form

Recommended Posts

  • Replies 4
  • Views 9k
  • Created
  • Last Reply

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;


I post answers because I want to help fellow Squarespace users. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 3 months later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.