Appointments+ Calendar on mobile

Hello,

Please advise me how can I solve the looks of the appointments table on mobile, here it is now:

Thank you!

  • Predrag Dubajic

    Hey Alex,

    Hope you're doing well today :slight_smile:

    You could try out with some CSS like this one:

    @media screen and (max-width: 480px) {
        .appointments-list table td {
            font-size: 0.5em;
        }
    
        .appointments-list table thead th,
        .appointments-list table tfoot th {
            overflow: hidden;
        }
    }

    That will use smaller font size for times and hide the characters from day names that are going out of the field.

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.