Mobile display

Hello there! 

Sorry to hear that you faced such an issue with our Hotel Booking plugin. 

The problem is that our Hotel Booking plugin doesn’t provide any default styles or design, it inherits everything from the active theme. That’s why it may be necessary to apply some custom styles to make all plugin sections and forms look beautiful on the third-party theme that hasn’t been designed for the plugin. In our themes, calendars on mobile devices are set to be displayed on top of each other by default. So you will need to apply some custom styles to your theme to complete that. 

Another way out would be to hide a second calendar on mobile devices, also with the help of CSS. Here’s an example:

@media (max-width: 600px){
.datepick-month.last{
display: none;
}}

Where “max-width: 600px” is a breakpoint that defines the screen widths for which the code will be applied. Feel free to set it according to your needs.

Many thanks – but can it remove the space as well? see here: https://app.screencast.com/W8S2AbQbJCMt3

Hello there! 

It would’ve been helpful if you provided us with your website URL, but here’s the code you may try using instead of the previous one:

@media (max-width: 600px){
.datepick-month.last{
display: none;
}
.datepick-month.first{
width: 100%;
}}

Add “!important” to the second rule if necessary.?

Apologses for that, and many thanks

Rob