Back to Booking Forms Guides

List Appointment Types in Columns

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

In this guide, we’ll share some CSS so that you can organize the appointment types into columns whenever you use the [ssa_booking] shortcode, which displays the Appointment Type’ list.

Find other ways to customize the Booking Calendar in the Style with the CSS Snippets guide.

Make sure to add the CSS in SSA Settings > Styles > Custom CSS field. If you’d like to learn more, see our guide on adding custom CSS to Simply Schedule Appointments.

Default List of Appointment Types

By default, the [ssa_booking] shortcode shows the appointment types in a single column. But, using the CSS listed below, you can change that to two or three columns.

List of appointment types displayed on a page, default layout.

Display the Appointment Type List In Two Columns

Appointment Types depicted in two columns.

Desktop and tablet users will see two columns and mobile users will see a single column. 

@media screen and (min-width: 500px){
/* Change direction of appointment type listings into a row and wrap the overflow */
.book-type > div:last-child {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

/* Set each appointment type listing to take up half of the book-type container */
.book-type > div > .book-type-single {
flex: 0 0 50%;
}
}

/* Set the 'What type of appointment are you booking?' header to take up 100% of the book-type container */
.book-type > div > .booking-header {
flex: 100%;
}

Display the Appointment Type List In Three Columns

Appointment Types depicted in three columns.

Desktop and tablet users will see three columns, and mobile users will see a single column. 

@media screen and (min-width: 500px){
/* Change direction of appointment type listings into a row and wrap the overflow */
.book-type > div:last-child {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

/* Set each appointment type listing to take up half of the book-type container */
.book-type > div > .book-type-single {
flex: 0 0 33%;
}
}

/* Set the 'What type of appointment are you booking?' header to take up 100% of the book-type container */
.book-type > div > .booking-header {
flex: 100%;
}

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides