Squarespace Code Snippets

A curated collection of reusable Squarespace code snippets for custom CSS, card grids, responsive layouts, forms, buttons, mobile spacing fixes, and custom code block sections.

These snippets are designed for Squarespace Code Blocks, Custom CSS, and layout refinements where built-in Squarespace blocks need more control.

What this repository includes

• Custom Squarespace section layouts
• Responsive card grids
• Form styling snippets
• Button styling patterns
• Mobile spacing fixes
• Custom code block examples
• Layout refinements for service businesses, nonprofits, clinics, and creative brands

Current snippets

Donation Card Grid

A responsive three-card layout that solves uneven spacing, copy alignment, button positioning, and mobile stacking limitations in Squarespace built-in blocks.

View live demo

View files:

• donation-card-grid/index.html
• donation-card-grid/styles.css
• donation-card-grid/README.md

Dropdown Navigation Redirect Fix

A JavaScript solution for Squarespace 7.1 dropdown folders when parent navigation labels need to redirect users to actual landing pages.

View files:

• dropdown-navigation-redirect-fix/script.html
• dropdown-navigation-redirect-fix/README.md

Code Block Scroll Reveal

A JavaScript and CSS solution that extends Squarespace scroll-reveal animations to custom Code Block elements so they animate consistently with built-in page content.

View files:

• code-block-scroll-reveal/script.html
• code-block-scroll-reveal/styles.css
• code-block-scroll-reveal/README.md

Responsive Equipment Card Table

A responsive grid that combines compact card styling with table-like row and column organization, solving spacing and alignment limitations for smaller repeated Squarespace content items.

View live demo

View files:

• equipment-card-table-grid/index.html
• equipment-card-table-grid/styles.css
• equipment-card-table-grid/README.md

Slideshow Navigation Text Labels

A CSS-only enhancement that adds visible “Previous” and “Next” labels to Squarespace slideshow controls while preserving the built-in arrow icons and applying custom brand colors.

View files:

• slideshow-navigation-text-labels/styles.css
• slideshow-navigation-text-labels/README.md

Navigation Link CTA Button

A CSS-only navigation enhancement that transforms a selected Squarespace desktop and mobile menu link into a branded CTA button while keeping it within the normal navigation order.

View files:

• navigation-link-cta-button/styles.css
• navigation-link-cta-button/README.md

Linked Logo Marquee

A responsive HTML and CSS marquee that displays clickable publication, press, partner, or client logos in a seamless scrolling strip, extending Squarespace beyond its built-in text-only scrolling options.

View live demo

View files:

• linked-logo-marquee/index.html
• linked-logo-marquee/styles.css
• linked-logo-marquee/README.md

Portrait Video Aspect Ratio Fix

A CSS-only solution that restores phone-recorded portrait videos to their original 9:16 display inside the native Squarespace Video Block, avoiding an undersized landscape-style player and unnecessary side bands.

View files:

• portrait-video-aspect-ratio-fix/styles.css
• portrait-video-aspect-ratio-fix/README.md

Responsive Content Pills

A flexible HTML and CSS pill layout that solves Squarespace spacing, wrapping, and alignment limitations when several short content items need to appear as a balanced group.

View live demo

View files:

• responsive-content-pills/index.html
• responsive-content-pills/styles.css
• responsive-content-pills/README.md

Contrasting Pricing Package Cards

A responsive HTML and CSS pricing layout that solves Squarespace padding, hierarchy, alignment, and equal-height limitations when complex package cards need different visual treatments.

View live demo

View files:

• contrasting-pricing-package-cards/index.html
• contrasting-pricing-package-cards/styles.css
• contrasting-pricing-package-cards/README.md

Text and Logo Marquee

A responsive HTML and CSS marquee that combines repeated text phrases with logos, icons, or image separators in a seamless loop, extending Squarespace beyond its built-in scrolling text options.

View live demo

View files:

• text-and-logo-marquee/index.html
• text-and-logo-marquee/styles.css
• text-and-logo-marquee/README.md

VideoObject Schema

A reusable JSON-LD snippet that describes an embedded Squarespace video with its title, description, thumbnail, upload date, and embed URL.

View files:

• video-object-schema/video-schema.html
• video-object-schema/README.md

Book Schema

A reusable JSON-LD snippet that describes a book, its author, publisher, language, genres, and landing page for search engines.

View files:

• book-schema/book-schema.html
• book-schema/README.md

FAQPage Schema

A reusable JSON-LD snippet that identifies visible frequently asked questions and their official answers on a Squarespace page.

View files:

• faq-page-schema/faq-schema.html
• faq-page-schema/README.md

Notes

These snippets are generalized examples based on common Squarespace website layout needs.

Client-specific content, branding, private URLs, icons, images, and project details have been removed or replaced with reusable placeholder content.

How to use

Copy the HTML into a Squarespace Code Block and add the CSS to Custom CSS or inside the page-level code area, depending on the project setup.

Always adjust colors, fonts, spacing, links, and content to match the brand and website structure.