Align Stacked Image Blocks

Code Toolkit
Written By Squarestylist Support

What You'll Create

Properly aligned stacked image blocks with a color background accent that spans half the height. Images align vertically while maintaining their aspect ratios.

The Problem It Solves

In the Classic Editor, stacked image blocks don't naturally align to equal heights, and adding decorative backgrounds behind them requires careful positioning. This technique creates aligned image layouts with color accent backgrounds.

Perfect For

About sections, Team photos, Product features, Split layouts, Magazine-style content

What Makes This Different

This technique uses Flexbox to align image blocks within a row while adding a pseudo-element color background to create a split design effect. Works specifically for Classic Editor sections in 7.0 and 7.1.

Details

  • Section Type: Classic

  • Code Type: CSS

  • Prerequisites: Section selector, Classic Editor section with image blocks

  • Toolkit Title: Align Stacked Image Blocks

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

Sticky Stacking Sections
Next

jQuery Accordion for Content Blocks