Slideshow: Side by Side

#1. First, install Squarespace ID finder and find the ID of 2 Gallery Slideshows

In my example, we will have:

section[data-section-id="6655814af27321176a65fb4e"]

and

section[data-section-id="6655814af27321176a65fb50"]

and page ID:

#collection-6655814af27321176a65fb4d

#2. Use this code to Custom CSS box

/* Side by side Slideshow */
body#collection-6655814af27321176a65fb4d:not(.sqs-edit-mode-active) {
& {
overflow: hidden;
}
  @media screen and (min-width:768px) {
    section[data-section-id="6655814af27321176a65fb4e"], section[data-section-id="6655814af27321176a65fb50"] {
     width: 50% !important;
    float: left !important;
    padding: 0px !important;
    height: 100vh !important;
  }  
  }
  @media screen and (max-width:767px) {
    .gallery-fullscreen-slideshow {
    height: 50vh !important;
}
  }
   .gallery-fullscreen-slideshow {
  margin-bottom: 0px !important;
  }
}

#3. Result

#4. Note:

#5. Explain code

Ask me a question, free