How to create a full width event page in Squarespace 7.1

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

If you have ever tried to edit an event page in Squarespace, you might have been disappointed with the lack of flexibility. The classic editor we use on event pages isn't as customizable as a standard page, but with a little custom CSS, we can get creative. This tutorial will show you how to create a full width event page in Squarespace 7.1 with custom CSS.

Squarespace Tutorial

Code Example

Here are the codes used in this tutorial. Be sure to edit the margin values, and the font and text properties to suit the style of your own website.

/* 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
}

---

---

Related Content

👀 How to keep event info visible on a scroll in Squarespace → insidethesquare.co/squarespace-tutorials/sticky-event-info

📅 How to customize event date tags in Squarespace → insidethesquare.co/squarespace-tutorials/custom-event-dates

❤️ Support my channel →buymeacoffee.com/insidethesquare

📖 Learn how to use Squarespace → insidethesquare.co/start

🖥️ Learn how to create code for Squarespace → insidethesquare.co/learn

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help