Back to Plugin Settings 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 which displays the Appointment Type’ list.

Find other ways to customize the Booking Calendar in the Style with 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.

Default layout for appointment types’ listing

Display Appointment Type List In Two Columns

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

@media screen and (min-width: 768px){
/* 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 50%;
}

/* 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

Display Appointment Type List In Three Columns

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

@media screen and (min-width: 768px){
/* 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 a third of the book-type container */
.book-type .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 .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