Appointements+ calendar is not responsive

The calendar is not being responsive on the phones, however it looks okay on tablets.
Could you assist with some CSS that can help resolve it?

  • Adam Czajczyk

    Hi Craig

    I checked the site and the appointments calendar seem to be responsible up (or rather down) to some point when then something else "takes over" (probably coming from the theme).

    I think I was able to come up with a sort of CSS workaround though:

    @media screen and (max-width:767px) {
    .page-id-7072 .entry-content .et_pb_column_4_4 {
      width:100%;
      overflow:hidden;
    }
    
    .entry-content table tr td {
      max-width:320px;
    }
    }

    Try adding this code to your custom CSS on site and see how it behaves on a screen smaller than 768px wide, it should fit better now. Again tho, it will only scale down a bit so to address even smaller screens you might want to add more "media queries". To do this:

    - first see what's the lowest screen width the calendar scales fine with this code added
    - then copy that code and add it again (so you have two identical blocks of the CSS like above)
    - and in the "lower" one adjust two values, first one would be the max-width in first line (replace it with that lowest screen width that you just fine) and the second one is the 320px value which you need to decrease too but you'll need to experiment with it to find out which one works best.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.