Title: [TUTORIAL] Making the calendar responsive
Last modified: August 24, 2016

---

# [TUTORIAL] Making the calendar responsive

 *  [dpcdpc11](https://wordpress.org/support/users/dpcdpc11/)
 * (@dpcdpc11)
 * [11 years ago](https://wordpress.org/support/topic/tutorial-making-the-calendar-responsive/)
 * Since the author didn’t bother to make the calendar responsive (where in the 
   freaking 2015 FFS!), here’s a little CSS customization to do it yourself.
    Just
   copy the following code in your theme’s style.css:
 *     ```
       #sbc-calendar {
         float: none;
         margin: 0 5px 30px 0;
       }
       .sbc-calendar-month {
         float: left;
         padding: 10px;
         width: 100%;
         border: 1px solid rgba(236, 236, 236, 0);
         background-color: #fff;
         margin-right: 10px;
         box-sizing: border-box !important;
       }
       #sbc-calendar table {
         border-top: 1px solid #E7E7E7;
         width: 100%;
       }
       #sbc-calendar table thead th, #sbc-calendar tr td {
         color: #333;
         font-family: ralewayregular;
         font-size: 12px;
         text-align: center;
         width: 14%;
         height: 30px;
       }
       ```
   
 * **Note **that this is only for the shortcode calendar inserted into pages, posts,
   etc. Not sure how it affects the widget calendar.
 * Hope this helps anyone. And… you’re welcome!
 * [https://wordpress.org/plugins/wp-simple-booking-calendar/](https://wordpress.org/plugins/wp-simple-booking-calendar/)

Viewing 1 replies (of 1 total)

 *  [simplebookingcalendar](https://wordpress.org/support/users/simplebookingcalendar/)
 * (@simplebookingcalendar)
 * [11 years ago](https://wordpress.org/support/topic/tutorial-making-the-calendar-responsive/#post-6163532)
 * Thanks a lot for sharing this, dpcdpc11.
 * Because the Free version only supports one month to be shown at a time, our thoughts
   were it was already ‘responsive’ enough.
 * But thanks again!

Viewing 1 replies (of 1 total)

The topic ‘[TUTORIAL] Making the calendar responsive’ is closed to new replies.

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

## Tags

 * [calendar](https://wordpress.org/support/topic-tag/calendar/)
 * [tutorial](https://wordpress.org/support/topic-tag/tutorial/)

 * 1 reply
 * 2 participants
 * Last reply from: [simplebookingcalendar](https://wordpress.org/support/users/simplebookingcalendar/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/tutorial-making-the-calendar-responsive/#post-6163532)
 * Status: not resolved