# Calendar Popup

**URL:** <https://community.elfsight.com/t/calendar-popup/36708>\
**Category:** Customization\
**Tags:** event-calendar\
**Created:** [January 10, 2024, 4:15am UTC](https://community.elfsight.com/t/calendar-popup/36708 "2024-01-10T04:15:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![KasebergPTC\_Secretar](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kasebergptc_secretar/32/6816_2.png) [@KasebergPTC\_Secretar](https://community.elfsight.com/u/KasebergPTC_Secretar)\
**Post date:** [January 10, 2024, 4:15am UTC](https://community.elfsight.com/t/calendar-popup/36708/1 "2024-01-10T04:15:19Z")

</div>

hi

How I can make the pop ups from the calendar monthly template smaller? They are too big for what I need

---

<div class="post-metadata">

**Author:** ![KasebergPTC\_Secretar](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/kasebergptc_secretar/32/6816_2.png) [@KasebergPTC\_Secretar](https://community.elfsight.com/u/KasebergPTC_Secretar)\
**Post date:** [January 10, 2024, 4:17am UTC](https://community.elfsight.com/t/calendar-popup/36708/2 "2024-01-10T04:17:20Z")

</div>

![Captura de pantalla 2024-01-09 a la(s) 8.12.17 p.m.](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/7/37ae1c851a110e052620e98fe639a995f254dcd8.jpeg)  
 ![Captura de pantalla 2024-01-09 a la(s) 8.12.21 p.m.](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/d/2d0c9fd937d6a8430c30c19c784ad99fdf8447bc.jpeg)  
 ![Captura de pantalla 2024-01-09 a la(s) 8.12.36 p.m.](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/0/c0f6640537421d503185d90d1047f0bb96196e7b.jpeg)

---

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [January 10, 2024, 8:49am UTC](https://community.elfsight.com/t/calendar-popup/36708/3 "2024-01-10T08:49:42Z")

</div>

You try adding this code to Custom CSS tab

```auto
.eapp-events-calendar-popup-item-inner {
    max-width: 500px !important;
    margin: 0 auto !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/6/063518aa669cd40ef9100f529027b026ad9284fc.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:** [January 10, 2024, 1:05pm UTC](https://community.elfsight.com/t/calendar-popup/36708/5 "2024-01-10T13:05:41Z")

</div>

Hey there @KasebergPTC_Secretar 👋

I checked the code by tuanphan, but, unfortunately it didn’t work. Our devs have added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

```auto
.global-styles,
.eapp-events-calendar-event-viewer-modalContent {
  flex-basis: 540px;
}

```

Check it out and let me know if you like what you see 🙂

---

<div class="post-metadata">

**Author:** ![Michael\_Montoya](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/michael_montoya/32/46323_2.png) [@Michael\_Montoya](https://community.elfsight.com/u/Michael_Montoya)\
**Post date:** [January 30, 2026, 5:28pm UTC](https://community.elfsight.com/t/calendar-popup/36708/6 "2026-01-30T17:28:32Z")

</div>

> [@Max](#):
>
> ```auto
> .global-styles,
> .eapp-events-calendar-event-viewer-modalContent {
> flex-basis: 540px;
> }
> 
> ```

I tried this but it doesn’t seem to work for images that are populated through the google calendar connection. Is there a fix to that?

---

<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:** [February 2, 2026, 10:59am UTC](https://community.elfsight.com/t/calendar-popup/36708/7 "2026-02-02T10:59:43Z")

</div>

Hi there, @Michael_Montoya 👋

Please try to use this CSS code instead and let me know if it helped:

```auto
.global-styles,
.eapp-events-calendar-modal-modal {
  width: auto !important;
}

.global-styles,
.eapp-events-calendar-popup-item-inner {
  max-width: 500px;
}

```

  

I’ve also noticed that you’re using the codes for the Portfolio widget in your Event Calendar. Please remove them to make the other codes work fine 🙂

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/9/89e9da7b719bcc261895db58c4c67f9910a152eb.png)