Free and Premium WordPress Plugins & Themes Forums WordPress Plugins Hotel Booking Re-size calendar pop-up to better fit mobile screens
- This topic has 5 replies, 3 voices, and was last updated 1 year, 1 month ago by J. Davis.
- AuthorPosts
- August 3, 2023 at 2:50 pm #1487091Ryan KossParticipant
I am trying to get the calendar pop-up to properly fit mobile screens. Currently, when opened, the calendar pushes the edges of the screen, which makes for an unfriendly mobile experience. I’ve tried various forms of CSS, with no success.
August 10, 2023 at 12:48 pm #1489953J. DavisKeymasterHi Ryan,
Thanks for your question. Could you please provide your site URL and specify the OS of the device you have used to test it? Does it occur on iOS or Android or both? Thanks
August 10, 2023 at 1:33 pm #1489972Ryan KossParticipantThis reply has been marked as private.August 11, 2023 at 6:49 am #1490301J. DavisKeymasterHi Ryan,
Thanks for the provided link. By default, the calendars should fill 100% width and take place one under another (vertically) on the mobile device. Perhaps some other plugin or theme overrides the style of your calendar. You may try to navigate to Accommodation > Settings and find the Calendar Style option to select one of the predefined styles.
If this does not help you may apply the style below at Appearance > Customize > Additional CSS:@media (max-width:720px){ .datepick-popup{ right:10px; left:10px; } .datepick.datepick-multi.mphb-datepick-popup{ width:auto !important; float:none; } .datepick-month { width: 100%; } }
Let me know if it is helpful.
September 3, 2023 at 12:56 pm #1499071RobertParticipantI’ve had the same issue as this but the CSS that you have provided has fixed it. (I was using an Android device)
Thank you for providing the css.
September 5, 2023 at 5:56 am #1499690J. DavisKeymasterHi Robert, I’m happy to know it was helpful. Thanks.
- AuthorPosts
- You must be logged in to reply to this topic.