CSS difference since 9.8

Hello.

Can you send the link to your page with booking form, where you are having the issue?

Thank you.

sure, here it is:

https://mforamsterdam.com/info/booking-calendar/

With 9.7.7.1 the two month were displayed one above the other, which is much clearer.

Hello.

In your case, you need to clear the Cache at your website.
Please recheck it in your cache plugin.

Currently you are using the CSS from the old version 9.8.1.

For even better look, after that you can add this CSS code to he Theme Editor. (Please check more here https://wpbookingcalendar.com/faq/how-edit-file-in-wp-menu/ ). It’s will make 100% width relative to your theme changing to mobile view (989px.):

@media (max-width: 989px) {
.bk_calendar_frame .datepick-inline { min-width: 100%; width: 100%; }
.bk_calendar_frame .datepick-one-month { min-width: 100%; width: 100%; }
}

In the next update of Booking Calendar we will add that CSS, but for smaller resolution, such as:

@media (max-width: 782px) {...}

Kind Regards.

Thanks for the response, but the cache had already been cleared several times… I just did it again now, and there is NO difference. The page which has the booking calendar is excluded from the cache, always on that website.

Fact is that the behavior with 9.8.2 styling is different from the 9.7.7.1 version.

You can check this yourself like I did, by rolling back the plugin and then changing the width of the screen, you will see that it behaves different with 9.8.2 at varous screen widths (so not only on the smallest screen size).

Thanks for the temp fix, I will try it on a dev website, for the live version I will wait for the next version’s fix.

Have a good day,

Rob

Hello.

Yes, the styles are different. It is because in some other websites, users insert the calendar into very narrow columns (less than 200px), and there we need to have ability to not overlap such columns.

The question only at what resolution we need to start shifting 2nd month to the new row. We will check what we can do there with improving such issues.

Currently I can suggest to add this CSS to your theme Editor, so it’s will change view for devices starting from 989px.

@media (max-width: 989px) {
.bk_calendar_frame .datepick-inline { min-width: 100%; width: 100%; }
.bk_calendar_frame .datepick-one-month { min-width: 100%; width: 100%; }
}

If this still not work for you, please let me know at what resolution did you make test (what mobile device)?

Kind Regards.

Thanks for your quick response. Sorry, I tried, but that code above still does not yield what 9.7.7.1 did ??

at 450px: 2 months horizontal (1 column in theme) (should yield vertical)
at 767px: months vertical (calendar is in middle of 3 columns with theme)
at 847px and bigger: 2 months horizontal (calendar is in middle of 3 columns with theme)

By the way, theme breakpoints are 360, 450, 768, 850, 989, 1024

I also tried:
@media only screen and (min-width: 360px) and (max-width: 989px) {

same result, not working

I think changing the breakpoint doesn’t do much good here, as some wider screens have 3 columns instead of 1. I will do some testing maybe with width maxcontent instead of 100%. I will let you know if I find a solution.

Thanks for your time and effort, no hurry

Just to clarify: I am using Enfold theme. Everything worked well on every size screen as it should with WPBC 9.7.7.1, but not with 9.8.2.

Ok, I think I have found solution, need to test it more, and then probably we will make update during weekend.

OK, that was quick, good news! Thanks you for allt he hard work on this great plugin! Have a good evening!

Thank you.
I have uploaded new update here https://wpbookingcalendar.com/demo/
You can test it with different resolutions (changing size), if you want.
We will make update during a weekend.

Have a nice weekend, too.

Hello.

Please try the new update 9.8.3

Kind Regards.

Hi,

Thank you for your efforts and for the quick fix! This WPBC 9.8.3 works perfect for me on all screen sizes with my theme.

I used this shortcode now:

[booking type=1 nummonths=2 form_type='standard' width='100%']

Everything works fine in all screen sizes now, for me even without the need for any additional CSS.

Thanks again for your work and enjoy the rest of the weekend!

Great. Thank you.

Have a nice evening.