How to style the related video items section title in Squarespace (7.1)

• 00
• 01
• 02
• 99

It’s not the first nor the second time we’ve customized 7.1’s Video Pages on the blog before.

However, today, we’ll be tweaking the area a little bit while focusing on the “You might also like” title, to make it look fully custom.

So, if you’re currently working on a client project that uses video pages – or are planning to do so in the future – make sure to check out the video to find out how you can create a very clean but stylish-looking related items area that matches your design.

Note: wondering about the font I used? It’s this one!

Tutorial

Overview & timestamps

Ready to find out how to style this little phrase (plus, some stuff here and there) on your client’s site? Let’s do it:

1. 00:00 - Intro

2. 00:56 - Overview of how we'll be styling the Related Videos section
   Before we jump into the code, we’ll take a quick look at what the final result looks like to see what customizations we’ll need to implement to recreate the look.

3. 01:46 - Styling the related video items section background
   Then, we’ll start out with the background of the related items section. We’ll need to look for the container that’ll work best for OUR needs and give it a background color, border and the padding that’ll help us create the overlap illusion.

4. 04:21 - Setting a custom font for the "You might also like" title of the related items
   Next, we’ll change up the section’s font for a lovely custom font that’ll really help spice up the native look of that area.

5. 05:01 - Creating the title overlap
   To create the overlap, we’ll use a sneaky negative margin trick, along with the padding from before, to make the text sit right in the middle of the top border.

6. 05:32 - Styling the related items video captions/titles
   Speaking of text, once we’re done with the main title we’ll move onto styling the little captions sitting below each recommended video, to make sure they’re clearly visible and separated from the background.

7. 09:17 - Making tweaks to the mobile look
   And of course, last but not least, we’ll spend a few minutes fixing the issues that inevitably come up on smaller screens such as spacing and custom text sizing.

And that’s that!

I hope you found this alternative way to style this section within video pages a great starting point for your next custom project.

Until next time,

B.

---

Full code

/*HOW TO STYLE THE RELATED VIDEO ITEMS SECTION TITLE IN SQUARESPACE 7.1*/
//To style the related items section bg
.lessons-item-related-item-list {
  background-color: #fafafa;
  border: 1px solid black;
  padding: 50px 30px 30px 30px;
}

//To style the related items section title
.lessons-item-related-title {
  font-family: 'Signature';
  font-size: 8rem;
  margin-bottom: -60px;
}

//To style the video titles
.lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-text {
  display: block;
  font-size: .9rem;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  text-transform: uppercase;
}

//Mobile styles
@media screen and (max-width: 920px) {
  .lessons-item-related-item-list {
    padding-top: 30px;
  }
  .lessons-item-related-title {
    font-size: 5rem;
    line-height: 0.8em;
    margin-bottom: 0;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .lessons-item-related-item-list .related-item {
    margin-bottom: 30px;
  }
}