Full Width Event Page: Squarespace Design Hack

event

Jun 25

Squarespace event pages come with limited design options, but don’t worry—custom CSS is here to save the day. In this tutorial, I’ll show you how to unlock new creative possibilities for your event pages, from making them full-width to adjusting fonts, aligning elements, and even hiding pagination.

✨ What you'll learn:

How to make your event page full-width.
Customizing titles, dates, and metadata with CSS.
Changing or hiding pagination to suit your style.

Here are the codes from this tutorial. Be sure to update the values to match your own unique site!

/* code from insidethesquare.co */
/* create full width event */
.eventitem{
  flex-direction:column
}
/* center title */
.eventitem-title{
  text-align:center;
  font-size:50px!important;
  color:red!important
}
.eventitem-meta{
  display:flex;
  justify-content: center;
  margin-bottom:2rem;
}
.eventitem-meta-date {
margin-right:10px
}
/* hide pagination */
.item-pagination[data-collection-type^="events"]{
  display:none
}