How to create a two line gallery caption

page section

Oct 26

Squarespace gallery captions can be an important part of showcasing images on your site, but the caption design settings we have are really limited. Paragraph is all we get, unless, you use the custom codes from this tutorial! 😎

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!! 😉

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

/* code from insidethesquare.co */
.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:

/* code from insidethesquare.co */
.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;
}