Back to Booking Calendar Guides

This guide applies to:

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

Introduction

In this guide, we’re going to share some CSS so that you can organize the appointment types into columns whenever you use the [ssa_booking] shortcode.

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

What You Need First

Please see our article on adding custom CSS to Simply Schedule Appointments to help with hiding headers, text and icons.


List Appointment Types in Columns

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

Default layout for appointment types

At Most Two Columns

This CSS will format the layout into two columns at the booking calendar’s widest settings. This means that desktop users will see two columns at most, while mobile users will see a single column.

/* Change direction of appointment type listings into a row and wrap the overflow */
.book-type {
flex-direction: row;
flex-wrap: wrap;
}

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

/* Set the 'What type of appointment are you booking?' header to take up 100% of the book-type container */
.book-type .booking-header {
flex: 100%;
}
Appointment Type listing in two columns

At Most Three Columns

This CSS will format the layout into three columns at the booking calendar’s widest settings. This means that desktop users will see three columns at most, tablets may see 2 columns, and mobile users will see a single column.

/* Change direction of appointment type listings into a row and wrap the overflow */
.book-type {
flex-direction: row;
flex-wrap: wrap;
}

/* Set each appointment type listing to take up 1/3 of the book-type container */
.book-type .book-type-single {
flex: 0 0 365px;
}

/* Set the 'What type of appointment are you booking?' header to take up 100% of the book-type container */
.book-type .booking-header {
flex: 100%;
}
Appointment Type listing in three columns

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