Side-by-Side List Section Layout

Code Toolkit
Written By Squarestylist Support

Side-by-Side List Section Layout

What You'll Create

A horizontal side-by-side layout for your Squarespace List Section items on desktop, with each item taking equal width. Perfect for displaying testimonials, features, or comparisons in a clean two-column format.

The Problem It Solves

Squarespace's List Section stacks items vertically by default. While you can adjust columns in some layouts, getting a true side-by-side layout with automatic equal distribution requires custom CSS.

Perfect For

Side-by-side testimonials, before/after comparisons, feature highlights, pricing tier displays, team member spotlights

What Makes This Different

Uses automatic equal-width distribution so items always share the space evenly. Includes a screen-width check that applies the layout only on desktop (768px and wider), keeping mobile stacked for better readability.

Details

  • Skill Level: Intermediate

  • Squarespace Version: 7.1

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: List Section with items, Desktop viewport

  • Toolkit Title: List Section Side by Side

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

Smooth Scroll Anchor Links for Squarespace