List Appointment Types in Columns

This guide applies to:

Basic Edition
Plus Edition
Pro Edition
Business Edition

In this document:

Introduction
Default List of Appointment Types
Display the Appointment Type List In Two Columns
Display the Appointment Type List In Three Columns

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.

Default layout for appointment types’ listing

Display the 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 the 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%;
}
}