Left, Right, or Center Align the Image Subtitle

What does this code do?

This code snippet will allow you to left, right, or center align the image subtitle without affecting the title and button.

Squarespace Settings

Squarespace 7.0

In Design > Site Styles set the Text Alignment to left, right, or center depending on how you want the title and button to be aligned.

Squarespace 7.1

In Design > Image Blocks set the Content Position to left, right, or center depending on how you want the title and button to be aligned.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS

/* Image Subtitle Alignment Site Wide */
.image-subtitle {
    text-align: left;
  }

/* Specific Image Subtitle Alignment */
SELECTOR .image-subtitle {
    text-align: left;
  }

Then change the word left to left, right, or center.

Finally, if you are targeting a specific image, change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* One Section */
#PAGEID

/* One Image Block */
#BLOCKID

/* All Poster Image Blocks */
.design-layout-poster

/* All Card Image Blocks */
.design-layout-card

/* All Overlap Image Blocks */
.design-layout-overlap

/* All Collage Image Blocks */
.design-layout-collage

/* All Stack Image Blocks */
.design-layout-stack

Note: Selectors may need to be adapted depending on the template used.

Squarespace 7.1

/* One Page */
#COLLECTIONID

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1)

/* One Image Block */
#BLOCKID

/* All Poster Image Blocks */
.design-layout-poster

/* All Card Image Blocks */
.design-layout-card

/* All Overlap Image Blocks */
.design-layout-overlap

/* All Collage Image Blocks */
.design-layout-collage

/* All Stack Image Blocks */
.design-layout-stack

How To Use It

1. Set the alignment of the title and button.

2. Copy and paste the code as indicated above.

3. Change the word left to the alignment you want for the subtitle.

4. Choose the selector that matches your situation.

5. To learn how to find a collection id, page id, or block id check out our Start Here guide.

6. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.