Do It Yourself – Website Tutorials

→ Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css
—
This tutorial was recorded in my 7.1 demo site but also works for older versions of Squarespace!
—

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

▸▸▸ Ready for more?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css

—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

source