How to create equal height blog summary blocks in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to create equal height blog summary blocks in Squarespace.

A few important things to note before you copy and paste this into your own site:

→ This works with a summary block on a standard page, both carousel or grid, but I prefer grid and used that type in this tutorial.

→ Adjust your own layout inside that summary block, to show things like metadata or a thumbnail... or not! You do you :)

→ Make sure you enable the read more link if you want to use that part of this code.

→ Update the vh value for your own excerpt length. You can also use a specific px value.

→ If you want to install this on just one page on your site, and not the whole thing, check out this tutorial for a step-by-step tutorial on how to do that with any code: https://youtu.be/kX6kRjCbzu8

Here are the codes from this tutorial:

Add a border to the summary:

.summary-item{border: 1px solid #000}

Add a border AND background color to the summary:

.summary-item{border: 1px solid #000; background: #d3efef}

Give some padding to that text so it's not as close to your new border:

.summary-content {padding-left: 10px}

Only on screens bigger than mobile, make all the summary items same height, and scoot the read more link to the bottom of the summary:

@media only screen and (min-width:650px){ .summary-item{height:55vh;} .summary-read-more-link {position:absolute!important; top:50vh}}