Divide appointment widget into 3 or 4 columns.

  • Profile Image
    brentitc
    Asked on August 30, 2016 at 11:25 PM

    hi!

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

     

    Thank you! 

  • Profile Image
    Chriistian
    Answered on August 31, 2016 at 05:13 AM

    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.

  • Profile Image
    brentitc
    Answered on August 31, 2016 at 08:04 PM

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

  • Profile Image
    brentitc
    Answered on August 31, 2016 at 08:45 PM
    tried the steps. these is the result.
    [image: Inline image 1][image: Inline image 2]
    ...
  • Profile Image
    Chriistian
    Answered on August 31, 2016 at 10:01 PM

    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.