# (Squarespace) How to change Event Page to List layout with Date (Left) – Title/Time (right)

**URL:** <https://community.elfsight.com/t/squarespace-how-to-change-event-page-to-list-layout-with-date-left-title-time-right/137476>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [August 12, 2025, 8:37am UTC](https://community.elfsight.com/t/squarespace-how-to-change-event-page-to-list-layout-with-date-left-title-time-right/137476 "2025-08-12T08:37:31Z")\
**Posts on this page:** 1\
**Page:** 1

<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:** [August 12, 2025, 8:37am UTC](https://community.elfsight.com/t/squarespace-how-to-change-event-page-to-list-layout-with-date-left-title-time-right/137476/1 "2025-08-12T08:37:31Z")

</div>

To change Event Page to List layout like this.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/e/4e5c2d13c0cfad9aa4b19d319e06f166839815b1.jpeg)

**#1.** First, edit Event Page \> Disable these options: Thumbnails & Excerpt

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

**#2.** Next, use this code to Custom CSS

You can also use [Event Calendar free widget](https://go.elfsight.io/click?pid=9&offer_id=4&path=/event-calendar-widget/) so you can customize Event layout easier without using complex code.

```auto
article.eventlist-event {
    background-color: #fafafa;
    align-items: center;
    margin-top: 20px !important;
    max-width: 600px;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    display: Flex !important;
}
/* remove button */
a.eventlist-button {
    display: none !important;
}
/* event date */
.eventlist-datetag {
    min-height: 120px !important;
    background-color: #000 !important;
    margin-right: 10px;
}
.eventlist-datetag * {
    color: #fff !important;
        opacity: 1 !important;
}
/* event title */
div.eventlist-column-info h1.eventlist-title .eventlist-title-link {
    color: #000 !important;
    font-weight: 600 !important;
}
.eventlist-meta * {
    color: rgb(249, 50, 98) !important;
}
/* remove line */
hr.eventlist-past-upcoming-divider {
    display: none !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/7/1748922418ef3e9d6c4800ea56e10d8aaa1a4934.jpeg)