Conversation
supporthi how do I get the calendars to display on mobile screens? At the moment it is side by side which is fine on desktop, but on mobile it needs to be on top of each other? see here: https://app.screencast.com/6j5no6fwtsCyb
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
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