Resize Gallery Sections for Mobile

What does this code do?

This code snippet will allow you to resize gallery sections on the mobile view in Squarespace 7.1. This can be helpful to stop the images from cropping on mobile.

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.

/*Width of all Gallery Sections*/
  .gallery {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

/* Height of Slideshow:Simple Gallery Sections*/
.gallery-slideshow {
    height: 40vh !important;
  }

/* Height of Slideshow:Full Gallery Sections*/
  .gallery-fullscreen-slideshow {
    height: 40vh !important;
  }

/* Height of Slideshow:Reel Gallery Sections*/
  .gallery-reel {
    height: 40vh !important;
    margin: 2vw;
  }

Finally, to target specific Gallery Sections add a selector before the .CLASSNAME.

/* 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. If targeting a specific gallery section, choose the selector that matches your situation.

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

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

5. Edit the “90%”, “40vh”, or “2vw” to the size of your liking.