How to create a two line gallery caption

Sep 5

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 was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Squarespace gallery captions can be an important part of showcasing images on your site, but the captions are SO BORING!

In this tutorial, you’ll learn how to use custom CSS to create two-line image descriptions in your gallery section. And we’ll change up the style of them too, to make them even more unique.

Below you’ll find the codes from this tutorial, but be sure to watch the video so you understand how to use them, and how to write a two-line caption in the first place - it’s not as easy as you might think!! 😉

Video tutorial

 Code Example

Here are the codes from this tutorial. Be sure to udpate the colors to match the style of your own unique website!

.gallery-grid-item .gallery-caption-content {
white-space:pre;
}
.gallery-grid-item .gallery-caption-content::first-line {
font-size: 1.5rem;
font-weight: bold;
}

Here is a second code example for you to try - this is the code used to create the two line text effect used in the thumbnail for this blog post:

.gallery-grid-item .gallery-caption-content {
white-space:pre!important;
letter-spacing: 2px!important;
}
.gallery-grid-item .gallery-caption-content::first-line {
font-size: 1.75rem;
font-weight: bold;
color: #50bdb8;
letter-spacing: 0!important;
}