Split Layout with a Slideshow Gallery | Squarespace 7.1

What does this code do?

This code snippet will create a split layout with a slideshow gallery so that the images are on one side and the captions and bullets are on the other.

Note: To help this effect be responsive, the slideshow will revert back to the original layout on screens smaller than 800px with the captions displaying overtop the images.

Video Tutorial

Add the Slideshow Gallery

Add a Gallery Section to your Squarespace Website. Make sure it is set to Slideshow: Full, Full Bleed, the controls are set to Bullets, and captions are turned on. You can also turn on Autoplay.

Click the image icon and upload your images. Add a caption in the description. You can also add a click through link.

Code Snippets

Copy and paste the following code into Design > Custom CSS.

.gallery-fullscreen-slideshow {
  margin-bottom: 0 !important;
  max-height: 90vh !important;
}

.gallery-fullscreen-slideshow .gallery-caption-wrapper {
  height: auto;
}

@media only screen and (min-width: 800px) {
  .gallery-fullscreen-slideshow .gallery-caption {
    max-width: unset;
  }
  .gallery-fullscreen-slideshow-item-wrapper {
    width: 50vw; /* width of the images */
    margin-left: 50%; /* images to the right */
  }
  .gallery-fullscreen-slideshow-bullet-nav {
    width: 44vw !important;
    justify-content: flex-start !important; /* bullets left aligned */
    margin: 3vw;
  }
  .gallery-fullscreen-slideshow-bullet.active {
    background-color: white !important; /* bullet color */
  }
  .gallery-fullscreen-slideshow-bullet {
    border-color: white !important; /* bullet color */
  }
  .gallery-caption-fullscreen-slideshow {
    top: 40%; /* caption placement from top */
    width: 44vw;
    text-align: left; /* text on left*/
    margin: 3vw;
  }

  .gallery-caption-fullscreen-slideshow .gallery-caption-content {
    font-size: 3rem !important; /* font size */
    line-height: 4rem !important; /* line height */
    color: white; /* caption color */
  }
}
@media only screen and (max-width: 800px) {
  .gallery-fullscreen-slideshow-bullet.active {
    background-color: white !important; /* bullet color on mobile */
  }
  .gallery-fullscreen-slideshow-bullet {
    border-color: white !important; /* bullet color on mobile */
  }
  .gallery-caption-fullscreen-slideshow {
    top: 35%; /* caption placement from top on mobile */
  }
  .gallery-caption-fullscreen-slideshow .gallery-caption-content {
    font-size: 2rem !important; /*caption font size on mobile */
    line-height: 1.2rem; /* caption line height on mobile */
    color: white; /* caption color on mobile */
    background: hsla(0,0,0,0.8); /*adds a background color to text on mobile */
  }
}

Then customize the colors, font-sizes, and positions.

My Image is Being Cut Off

To have your full image show (and not zoom when screen is resized), copy and paste this code into Design > Custom CSS.

Note: Be warned that this may cause white space to show above or below of the image.

.gallery-fullscreen-slideshow img {
  object-fit: contain !important;
}

How To Use It

1. Upload your gallery and set your captions.

2. Copy and paste the code as indicated above.

3. Customize the colors, font-sizes, and positioning.