Re-size calendar pop-up to better fit mobile screens

[Ryan Koss]

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.

[J. Davis]

Hi 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

[Ryan Koss]

This reply has been marked as private.

[J. Davis]

Hi 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.

[Robert]

I’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.

[J. Davis]

Hi Robert, I’m happy to know it was helpful. Thanks.

[Author]

Posts