Appointments+ Calendar Mobile Responsive?

Is it possible to make the generated Appointments+ Calendar Mobile Responsive? See the attached booking calendar page which forces users to zoom out in order to see the full calendar.

  • Predrag Dubajic
    • Support

    Hey Matt,

    Hope you’re doing well :slight_smile:

    Appointments+ should be adjusting the calendar width to fit the screen size but it seems that something on your site is affecting this behavior, however, it’s hard to say what’s going on from the screenshot only.

    Can you share URL to your booking page so we can investigate this further?

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hi Matt,

    It seems that your theme is applying some additional padding to the calendar which forces its width to go outside of the original boundaries so it doesn’t fit on the smaller screens.

    You can use below CSS code and it will override the padding on the appointment page so that the calendar can show properly on all screen sizes:

    .post-32306 .entry-content tr td,
    .post-32306 body.et-pb-preview #main-content .container tr td {
    padding: 0;
    }

    If I remember correctly Divi theme offers a Custom CSS field in theme options and you can this code there.

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hi Matt,

    Can you try replacing the code I provided you above with this new one and that should do the trick:

    .post-32306 .entry-content tr td,
    .post-32306 body.et-pb-preview #main-content .container tr td {
    padding: 0;
    width: auto;
    }

    Let me know how it goes :slight_smile:

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hi Matt,

    I’m afraid that with the current page structure on your site this is not possible, as there’s nothing I could hook the CSS code to.

    However, I do have a suggestion that could work.

    What you will need to do is create a new page template that will be used for Appointment page, and since page template has it’s own class we can apply the code that way.

    What you will need to do is to create a child theme first, you can read more about that here:

    http://premium.wpmudev.org/blog/create-wordpress-child-theme/

    Or ask the Divi support, they might already have started child theme for you.

    Now you can copy page.php from the parent theme and paste it to the child theme, just rename it to something else, for example, appointment-page.php

    After that edit the file and after the opening PHP tag <?php just add this code to make a template out of that file:

    /**
    * Template Name: Appointment Page
    *
    */

    Save the file and part is done.

    Edit your appointment page in WP and you will now have Appointment Page as a template so select that, it shouldn’t affect your page at all since we didn’t actually change any code of the page itself.

    What’s left to do now is to edit your CSS code to apply it only to that template and you can do that by changing previously provided code to this:

    .appointment-page .entry-content tr td,
    body.et-pb-preview.appointment-page #main-content .container tr td {
    padding: 0;
    width: auto;
    }

    Save the changes and that should be it.

    Let us know if that will do the trick for you :slight_smile:

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.