# Mobile display for Monthly schedule style

**URL:** <https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916>\
**Category:** Event Calendar\
**Tags:** Released\
**Created:** [March 22, 2023, 10:06am UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916 "2023-03-22T10:06:36Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorothy1](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dorothy1/32/102071_2.png) [@Dorothy1](https://community.elfsight.com/u/Dorothy1)\
**Post date:** [March 22, 2023, 10:06am UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/1 "2023-03-22T10:06:36Z")

</div>

I love your Event Calendar, unfortunately the display is not ideal for mobile view. Only the first letter of the event name can be displayed, and the calendar is a bit long to read if there are several events on a day. May I know is there any suggestion on CSS code / setting that I may adjust to improve the mobile view layout of my calendar?

Thank you so much for help!

 ![Screenshot 2023-03-22 at 6.03.44 PM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/1/1761e927ff01b02bc52c0f084b4ee61a60a68918.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 22, 2023, 2:46pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/4 "2023-03-22T14:46:34Z")

</div>

Hi @Dorothy1! Happy to see you here! Welcome to Community 🎉

Your idea is awesome and I bet this option added to the editor would be really useful for many users. We’ll try to consider your suggestion in our future updates!

Thank you for sharing this idea ❤

As for now, unfortunately, it’s impossible to change the calendar length on mobile. I am so sorry!

To decrease the size of the event name, add this CSS code to the Custom CSS field on the Appearance tab and let me know if it helped:

```auto
@media screen and (max-width: 480px) {
    .fc-event-title {
      height: 22px;
      font-size: 8px !important;
      word-break: break-all;
      padding: 0;
    }
    
    .fc-event-time {
      font-size: 8px !important;
    }
    
    .fc-daygrid-event {
      white-space: normal;
    }
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/3/3b251700c2a32bd9ea5f219abde7794f805b1f44.png)

Please check it and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 5, 2024, 3:10pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/5 "2024-09-05T15:10:17Z")

</div>

17 posts were split to a new topic: [Event Calendar Customization request](https://community.elfsight.com/t/event-calendar-customization-request/69082)

---

<div class="post-metadata">

**Author:** ![Mark\_Oshman](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/mark_oshman/32/5969_2.png) [@Mark\_Oshman](https://community.elfsight.com/u/Mark_Oshman)\
**Post date:** [September 19, 2023, 11:28pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/22 "2023-09-19T23:28:48Z")

</div>

The mobile view for Calendar view is not asthetically pleasing. You can only see the first or second letter of each event so you have to click on it to see what it is. I like the view on our webpage for computer or tablet use, but most people use their phones and don’t like the way that looks. Any suggestions?

 ![Screenshot_20230919_172639_Chrome](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/c/cbbedba01b41af48f6c1e787863473f0f211f59b.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 20, 2023, 12:52pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/23 "2023-09-20T12:52:51Z")

</div>

Hi @Mark_Oshman and welcome aboard 🎉

I am very sorry our widget doesn’t support this feature. We already have such a request in our Wishlist and I moved your request to the dedicated topic. All the updates will be posted here 🙂

In the messages above, we’ve shared CSS codes to decrease the size of the event names. You are very welcome to check it 🙂

A huge thank you for adding your idea to our Wishlist!

---

<div class="post-metadata">

**Author:** ![Nancy\_Lerma](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/nancy_lerma/32/5484_2.png) [@Nancy\_Lerma](https://community.elfsight.com/u/Nancy_Lerma)\
**Post date:** [August 5, 2024, 9:37pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/24 "2024-08-05T21:37:10Z")

</div>

Has there been any update on making the month view more mobile friendly? Please let me know.

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 6, 2024, 8:12am UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/25 "2024-08-06T08:12:58Z")

</div>

@Nancy_Lerma I’m really sorry but I don’t have any news about this request as yet 😞

However, this is the code our devs have prepared to improve the mobile view:

```auto
.eapp-events-calendar-calendar-component .fc-daygrid-event {
  white-space: normal;
}
@media screen and (max-width: 480px) {
  .fc-event-title {
    height: 22px;
    font-size: 8px !important;
    word-break: break-all;
    padding: 0;
  }

  .fc-event-time {
    font-size: 8px !important;
  }

  .fc-daygrid-event {
    white-space: normal;
  }
  
  /* Widget Margins */
  [class*="WidgetBackground__Container-sc"] {
    padding: 4px;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Nancy\_Lerma](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/nancy_lerma/32/5484_2.png) [@Nancy\_Lerma](https://community.elfsight.com/u/Nancy_Lerma)\
**Post date:** [August 6, 2024, 5:00pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/26 "2024-08-06T17:00:03Z")

</div>

> [@Helga](#):
>
> ```auto
> .eapp-events-calendar-calendar-component .fc-daygrid-event {
> white-space: normal;
> }
> @media screen and (max-width: 480px) {
> .fc-event-title {
> height: 22px;
> font-size: 8px !important;
> word-break: break-all;
> padding: 0;
> }
> 
> .fc-event-time {
> font-size: 8px !important;
> }
> 
> .fc-daygrid-event {
> white-space: normal;
> }
>   
> /* Widget Margins */
> [class*="WidgetBackground__Container-sc"] {
> padding: 4px;
> }
> }
> 
> ```

Hi Helga - thank you! That is a little better.

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 7, 2024, 9:34am UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/27 "2024-08-07T09:34:47Z")

</div>

@Nancy_Lerma Awesome, thanks a lot for sharing! 😍

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 22, 2025, 5:29pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/28 "2025-10-22T17:29:35Z")

</div>

2 posts were split to a new topic: [Month layout on desktop, list on mobile](https://community.elfsight.com/t/month-layout-on-desktop-list-on-mobile/140808)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 22, 2025, 5:25pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/33 "2025-10-22T17:25:41Z")

</div>

A post was split to a new topic: [Button to allow users switch layours right on the website](https://community.elfsight.com/t/button-to-allow-users-switch-layours-right-on-the-website/140807)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 17, 2026, 6:01pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/35 "2026-03-17T18:01:20Z")

</div>

Friends, quick update: we’ve started working on this feature and it’s in the **Development** stage now! 🎉

As usual, we’ll keep you posted on the progress here 😊

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 8, 2026, 4:26pm UTC](https://community.elfsight.com/t/mobile-display-for-monthly-schedule-style/13916/37 "2026-04-08T16:26:40Z")

</div>

Hey everyone!

We’re happy to share that we’ve improved the display of the Monthly layout on mobile 🎉

Check this post for more details and share your feedback in the post thread 😉 - [Event Calendar: [MAJOR UPDATE] Enjoy revamped Calendar layouts and expanded Google Calendar integration!🚀](https://community.elfsight.com/t/event-calendar-major-update-enjoy-revamped-calendar-layouts-and-expanded-google-calendar-integration/153374)