# Center event card elements on mobile (List layout)

**URL:** <https://community.elfsight.com/t/center-event-card-elements-on-mobile-list-layout/57652>\
**Category:** Event Calendar\
**Created:** [June 19, 2024, 1:39pm UTC](https://community.elfsight.com/t/center-event-card-elements-on-mobile-list-layout/57652 "2024-06-19T13:39:03Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [June 19, 2024, 1:39pm UTC](https://community.elfsight.com/t/center-event-card-elements-on-mobile-list-layout/57652/1 "2024-06-19T13:39:04Z")

</div>

Add this code to the Custom CSS field on the Style tab of your [Event Calendar](https://elfsight.com/event-calendar-widget/) widget’s settings:

```auto
@media(max-width: 500px) {
.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;
}
}

```

  

Guys, if this code was helpful, please drop us a line in the comments 🙂