Availability calendar not resizing on mobile version

Hi,
The calendar is based on a table and rely for its styling on the css around it. The width of the calendar table is set to 100% so it takes the dimension of its surrounding box defined by the theme.
In your case this is:
#container.two-columns-right #content?{
1. width:?calc(100% – 280px);
2. float:?left;
}
When I look to your site it resizes but the content part stops at about 590 px. I am not familiar with the calc statement above but I know it is still experimental.

The link https://exisweb.net/responsive-tables-in-wordpress gives more information.

Regards,

Jan

Many thanks for you swift reply.

So sorry if I’m betraying my total ignorance, but are you saying then that the issue is basically with the theme and that the table resizes normally in other themes?

I have tried setting the page layout to one column to remove some of the complications with the two column layout, but that’s not changed the situation.

Thank you for the useful information on responsive tables. Unfortunately, coding is way beyond my level of experience, but I might be able to “phone a friend”.

Many thanks,
Katrin

Hi Karin,

Put
<style>
.table_pos {width:600px;}
@media screen and (max-width: 600px) {
.table_pos {width:200px;}
</style>

on the page with the calendar. Change the values of the width of .table_pos to the values that shuts you.

Regards,

Jan

Thank you so much for all your efforts, but unfortunately that didn’t work (possibly because of the text in the table). However, a friend had another suggestion which worked great.

Maybe others may find this equally useful:
By putting the following into my custom.css, the table now simply scrolls across:

@media screen and (max-width: 600px) {
.table_pos {display:block;overflow:scroll;}

Regards,
Katrin