Remove Spacing from Gallery Sections | Squarespace 7.1

What does this code do?

This code snippet will allow you to remove some of the padding from your Gallery Sections in Squarespace 7.1.

The code will differ slightly based on the settings of your gallery section. Before looking at the following code, make sure you know the Gallery Type (Grid:Simple, Grid:Masonry, Grid:Strips, Slideshow:Simple, Slideshow:Full, Slideshow:Reel). For all types except the Simple Slideshow, also take note of the Width (Full or Inset).

If you want no spacing, you do not need code. Set the Grid Gallery Width to Full Bleed or use Slideshow: Full.

Custom CSS

Copy and paste the code for your Gallery Type into Design > Custom CSS

Grid Simple: Full Width

/* Change Padding On All Sides */
.gallery-grid[data-width="full"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-grid[data-width="full"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-grid[data-width="full"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Grid Simple: Inset Width

/* Change Padding On All Sides */
.gallery-grid[data-width="inset"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-grid[data-width="inset"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-grid[data-width="inset"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Grid Masonry: Full Width

/* Change Padding On All Sides */
.gallery-masonry[data-width="full"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-masonry[data-width="full"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-masonry[data-width="full"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Grid Masonry: Inset Width

/* Change Padding On All Sides */
.gallery-masonry[data-width="inset"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-masonry[data-width="inset"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-masonry[data-width="inset"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Grid Strips: Full Width

/* Change Padding On All Sides */
.gallery-strips[data-width="full"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-strips[data-width="full"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-strips[data-width="full"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Grid Strips: Inset Width

/* Change Padding On All Sides */
.gallery-strips[data-width="inset"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-strips[data-width="inset"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-strips[data-width="inset"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Slideshow Reel: Full Width

/* Change Padding On All Sides */
.gallery-reel[data-width="full"]  {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-reel[data-width="full"]  {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-reel[data-width="full"]  {
  padding-right: 2vw;
  padding-left: 2vw;
}

Slideshow Reel: Inset Width

/* Change Padding On All Sides */
.gallery-reel[data-width="inset"] {
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-reel[data-width="inset"] {
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-reel[data-width="inset"] {
  padding-right: 2vw;
  padding-left: 2vw;
}

Slideshow Simple

/* Change Padding On All Sides */
.gallery-slideshow{
  padding: 2vw;
}

/* Change Padding On the Top and Bottom */
.gallery-slideshow{
  padding-top: 2vw;
  padding-bottom: 2vw;
}

/* Change Padding On the Right and Left */
.gallery-slideshow {
  padding-right: 2vw;
  padding-left: 2vw;
}

Target a Specific Section

This will effect all the Gallery Sections of that type on your site. If you want to target a specific set of gallery sections, then add one of the following selectors before the code.

/* One Page */
#COLLECTIONID

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

For example, if I wanted to alter the spacing in a Slideshow Reel with an Inset Width on one page only I would use the following.

/* Change Padding On All Sides */
#COLLECTIONID .gallery-reel[data-width="inset"] {
  padding: 2vw;
}

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 check out our Start Here guide.

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

5. Customize the 2vw to your liking.