Resize Gallery Blocks for Mobile

What does this code do?

This code snippet will allow you to resize gallery blocks on the mobile view in Squarespace.

Note: Gallery Blocks are available throughout Squarespace 7.0 and certain page types in Squarespace 7.1. This code will not work on Gallery Sections. For resizing Gallery Sections in Squarespace 7.1, click here.

Code Snippets

Copy and paste this code into Design > Custom CSS

@media only screen and (max-width:640px) {
  CODE GOES HERE
}

Then add the appropriate code in between the brackets.

/* To target all Gallery Blocks Site Wide */
  .sqs-block-gallery {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }

/* To target specific Gallery Blocks */
  SELECTOR .sqs-block-gallery {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* One Section */
#PAGEID

/* One Text Block */
#BLOCKID

Squarespace 7.1

/* One Page */
#COLLECTIONID

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

/* One Text Block */
#BLOCKID

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

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

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