Full Height Gallery Slideshow

Code Toolkit
Written By Squarestylist Support

What You'll Create

A gallery block slideshow that stretches to fill the full height of its container in the Fluid Engine. Images display at full height with object-fit cover.

The Problem It Solves

Gallery block slideshows in Squarespace have a default height that doesn't fill the available space. When you need a full-height slideshow within a Fluid Engine section, you need CSS to force 100% height on all nested containers.

Perfect For

Full-height hero slideshows, Split section galleries, Portfolio showcases, Product displays, Immersive image sections

What Makes This Different

This technique targets all the nested containers within the gallery block: sqs-block-content, sqs-gallery-design-stacked, and the slide images themselves. Uses object-fit:cover to ensure images fill without distortion.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: Gallery block (stacked/slideshow) in Fluid Engine section

  • Toolkit Title: Gallery Slideshow Height (Fluid)

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Split Layout Autoplaying Slideshow
Next

Random Image on Page Load