Divide appointment widget into 3 or 4 columns.

hi!

Is there a way of dividing the appointment slots into 3 or 4 columns?

 

Thank you! 

Yes, you can have the appointment slots into 4 columns. Simply follow the steps below.

1. First, we need to widen the the appointment slot widget to fit the 4 columns. Simply select the widget and click on the Width property from the top menu. Set it to 600.

2. Then simply add the CSS code below to each of the Appointment Slot widget's Custom CSS area.

#checklist li {

    width: 25% !important;

}

3. Update the widget and it should now look like the image below.

If you need further assistance, please let us know.
Regards.

thanks. but i have noticed that the time sequence are messed-up.  is there a way to fix this. i really appreciate the help. 

tried the steps. these is the result.
[image: Inline image 1][image: Inline image 2]
...

Unfortunately your screenshot did not reach the forum. To send a screenshot, please follow this guide: How to add screenshots/images to questions to the support forum?

As for the widget, please remove all the previous code in the Custom CSS area of the Appointment Slots widget and replace it with the code below:

#checklist li{

float:left;

height: 80px;

border-right: 1px solid lightgray;

width: 24.8% !important;

}

Here's how it should look after.

If you need further assistance, please let us know.
Regards.