Jump to content

Horizontal Radio Buttons in a form

Recommended Posts

  • Replies 4
  • 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;
   }
}


Paul


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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 months later...

Archived

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

Guest
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.