# Mobile display for the layout LIST

**URL:** <https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784>\
**Category:** Customization\
**Tags:** event-calendar\
**Created:** [February 6, 2026, 8:59am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784 "2026-02-06T08:59:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Elmar\_Vigl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/elmar_vigl/32/37036_2.png) [@Elmar\_Vigl](https://community.elfsight.com/u/Elmar_Vigl)\
**Post date:** [February 6, 2026, 8:59am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/1 "2026-02-06T08:59:30Z")

</div>

Great tool, I love it! But unfortunately the display for the layout LIST is not ideal for mobile view. There ist too much of white space.

---

<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 6, 2026, 9:25am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/3 "2026-02-06T09:25:29Z")

</div>

Hi there, @Elmar_Vigl 👋

Thank you so much for the feedback!

Would you like to reduce the width of the event cards on mobile or maybe align event elements to the center to fill more space?

---

<div class="post-metadata">

**Author:** ![Elmar\_Vigl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/elmar_vigl/32/37036_2.png) [@Elmar\_Vigl](https://community.elfsight.com/u/Elmar_Vigl)\
**Post date:** [February 6, 2026, 9:45am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/4 "2026-02-06T09:45:25Z")

</div>

On the desktop website, the layout displays correctly as a list. However, on mobile, the text and graphics are stacking vertically. This causes the event graphic to stretch into a square. Please ensure that the text and graphics remain aligned in a single row on mobile, just like on the desktop version.

---

<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 6, 2026, 10:05am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/5 "2026-02-06T10:05:43Z")

</div>

Got it, thanks!

Our devs will gladly customize the widget for you. I’ve passed your request on to them and will update you once it’s done 😉

---

<div class="post-metadata">

**Author:** ![Elmar\_Vigl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/elmar_vigl/32/37036_2.png) [@Elmar\_Vigl](https://community.elfsight.com/u/Elmar_Vigl)\
**Post date:** [February 6, 2026, 10:15am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/6 "2026-02-06T10:15:49Z")

</div>

Perfect, thank you!

---

<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 6, 2026, 10:18am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/7 "2026-02-06T10:18:52Z")

</div>

You’re welcome!

While you’re waiting for the solution from the devs, we’d like to invite you to participate in our new contest, where you can win a **6-month extension** for your subscription - [February Contest: Guess What’s Missing in Our Photo and Win 6 Months FREE! 🎁](https://community.elfsight.com/t/february-contest-guess-what-s-missing-in-our-photo-and-win-6-months-free/143321)

Check the details and join in 😉

---

<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 9, 2026, 11:21am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/8 "2026-02-09T11:21:23Z")

</div>

Hi there, @Elmar_Vigl 👋

Please add the code below to the **Custom CSS** section on the **Style** tab of your widget’s settings and let me know if you like the result:

```auto

@media(max-width: 600px) {
  .eapp-events-calendar-list-item-info {
    justify-content: center;
  }

  .eapp-events-calendar-list-item-infoInner {
    align-items: center !important;
  }

  .eapp-events-calendar-list-item-mobile .eapp-events-calendar-list-item-date {
    align-self: center;
  }

  [class*='eapp-events-calendar-calendar-header-container '] {
    display: flex;
    justify-content: center;
  }

  [class*='eapp-events-calendar-calendar-header-button'] {
    display: flex;
    justify-content: center;
  }

  .eapp-events-calendar-button-link .es-button-base-overlay {
    padding: 0px !important;
  }
}

@media(max-width: 500px) {
  .eapp-events-calendar-date-element-component {
    margin: 0;
    margin-bottom: 20px;
  }

}

@media (max-width: 480px) {
  .eapp-events-calendar-time-time {
    font-size: 10px;
  }

  .eapp-events-calendar-list-item-locationAndTime {
    margin-top: 4px;
  }
  
  .eapp-events-calendar-list-item-component,
  .eapp-events-calendar-list-item-info {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .eapp-events-calendar-list-item-name,
  .eapp-events-calendar-date-element-day {
    font-size: 13px !important;
  }

  .eapp-events-calendar-category-item,
  .eapp-events-calendar-date-element-month {
    font-size: 10px !important;
  }

  .eapp-events-calendar-list-item-imageContainer {
    height: 36px !important;
    width: 36px !important;
    margin: 0 !important;
  }

  .eapp-events-calendar-list-item-component {
    gap: 4px;
    padding: 10px !important;
  }

  .eapp-events-calendar-list-item-date {
    min-width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: -18px 0px -18px -10px !important;
    height: 100px !important;
  }

  .eapp-events-calendar-list-item-component,
  .eapp-events-calendar-list-item-infoContainer {
    align-items: center !important;
  }

  .eapp-events-calendar-list-item-button {
    margin: 0 !important;
  }

  .eapp-events-calendar-date-element-start {
    height: auto !important;
    width: auto !important;
  }

  .eapp-events-calendar-list-item-infoInner>div {
    text-align: left !important;
    width: 100% !important;
  }

  .eapp-events-calendar-list-item-infoInner {
    margin: 0 8px !important;
  }

  .eapp-events-calendar-list-item-component {
    position: relative;
  }
}

.eapp-events-calendar-list-item-component {
  margin: 0;
}

```

---

<div class="post-metadata">

**Author:** ![Elmar\_Vigl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/elmar_vigl/32/37036_2.png) [@Elmar\_Vigl](https://community.elfsight.com/u/Elmar_Vigl)\
**Post date:** [February 13, 2026, 10:35am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/9 "2026-02-13T10:35:30Z")

</div>

It works! And it’s looks fantastic! THANKS!!!

---

<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 13, 2026, 10:42am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/10 "2026-02-13T10:42:06Z")

</div>

Perfect, you’re very welcome!

Feel free to contact us here again in case of any questions. We’ll be more than happy to help 😊

---

<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 13, 2026, 10:42am UTC](https://community.elfsight.com/t/mobile-display-for-the-layout-list/143784/11 "2026-02-13T10:42:45Z")

</div>

In the meantime, we’d like to invite you to participate in our new contest, where you can win a **6-month extension** for your subscription - [February Contest: Guess What’s Missing in Our Photo and Win 6 Months FREE! 🎁](https://community.elfsight.com/t/february-contest-guess-what-s-missing-in-our-photo-and-win-6-months-free/143321)

Check the details and join in 😉