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.

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

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
}