Title: CSS difference since 9.8
Last modified: November 10, 2023

---

# CSS difference since 9.8

 *  Resolved [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/)
 * There’s still a difference in styling from 9.7.7.1 after update to 9.8.2 on small
   screens. I have added to my CSS:
 * .wpbc_container_booking_form {width: 100%;}
 * and use shortcode
 * [booking type=1 nummonths=2 form_type=’standard’]
 * With 9.7.7.1 the smallest screens show the two months nicely one below the other,
   with 9.8.2 they show on one row next to each other, so squashed on smallest screen
   size (phone vertical).
 * When I choose to show 1 month, then the calendar does not stretch to take up 
   the available space on larger screen sizes.
 * Can you advise? Thanks in advance!
 * Rob

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17191579)
 * Hello.
 * Can you send the link to your page with booking form, where you are having the
   issue?
 * Thank you.
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17191639)
 * sure, here it is:
 * [https://mforamsterdam.com/info/booking-calendar/](https://mforamsterdam.com/info/booking-calendar/)
 * With 9.7.7.1 the two month were displayed one above the other, which is much 
   clearer.
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17191928)
 * 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/](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.
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17191987)
 * 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
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192008)
 * 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.
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192120)
 * 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](https://wordpress.org/support/users/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
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192188)
 * 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.
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192224)
 * Ok, I think I have found solution, need to test it more, and then probably we
   will make update during weekend.
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192368)
 * OK, that was quick, good news! Thanks you for allt he hard work on this great
   plugin! Have a good evening!
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17192411)
 * Thank you. 
   I have uploaded new update here [https://wpbookingcalendar.com/demo/](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.
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17193835)
 * Hello.
 * Please try the new update 9.8.3
 * Kind Regards.
 *  Thread Starter [Rob de Cleen](https://wordpress.org/support/users/rdc2701/)
 * (@rdc2701)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17194017)
 * 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:
 *     ```wp-block-code
       [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!
 *  Plugin Author [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * (@wpdevelop)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17194020)
 * Great. Thank you.
 * Have a nice evening.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘CSS difference since 9.8’ is closed to new replies.

 * ![](https://ps.w.org/booking/assets/icon-256x256.gif?rev=3335907)
 * [Booking Calendar](https://wordpress.org/plugins/booking/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/booking/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/booking/)
 * [Active Topics](https://wordpress.org/support/plugin/booking/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/booking/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/booking/reviews/)

 * 13 replies
 * 2 participants
 * Last reply from: [wpdevelop](https://wordpress.org/support/users/wpdevelop/)
 * Last activity: [2 years, 6 months ago](https://wordpress.org/support/topic/css-difference-since-9-8/#post-17194020)
 * Status: resolved