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

[tuanphan]

To change Event Page to List layout like this.

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

#2. Next, use this code to Custom CSS

You can also use Event Calendar free widget so you can customize Event layout easier without using complex code.

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;
}