Booqable Availability Calendar Issues in Mobile View

Site URL: https://www.crazyeightsrollerskates.com/book

I have Booqable installed and everything works fine on the desktop, but as soon as you click 'select dates' on mobile the top of the calendar pop-up is obscured by the header so you can't scroll through to a different month or see the days. Nothing I'm doing seems to be working -- is there anything I can do to fix this?

@media screen and (max-width:800px) {
  .DayPickerContainer-BJeEl {
    padding-top: 150px !important;
  }
}

Were you able to resolve this issue? I'm having the same problem and the suggested code did not work for me. Thanks!

Hello,

I have seen this asked before, but have not seen a solution that works. The availability calendar on my site through Booqable is cut off at the top, so that the month can't be seen when accessing it in mobile view. This is not an issue when viewing on a desktop. Is it possible to resize the calendar? The code that was recommended does not seem to work for me. This was the recommended code:

@media screen and (max-width:800px)

{

      .DayPickerContainer-BJeEl {

      padding-top: 150px !important;

       }

}

Any suggestions?

On 4/27/2023 at 1:48 AM, littleluxe said:

Were you able to resolve this issue? I'm having the same problem and the suggested code did not work for me. Thanks!

If you share link to page where you use calendar, we can check it again easier

Hi,

Can you share link to page where you have problem?

Did you try changing it to phone view on squarespace and editing that view?

Did you guys try, on squarespace, clicking on the phone view and bringing the page down (extending it)?