Squarespace CSS Cheat Sheet: 20 Snippets for the Usual Fixes

This Squarespace CSS cheat sheet is the twenty snippets I paste most often into Website, Website Tools, Custom CSS on 7.1 sites: the ones that fix the header, the buttons, the mobile spacing and the small things the Site Styles panel cannot reach. Each snippet is short, works on Squarespace 7.1 in 2026, and is written so you only change the number or the colour. Two rules before you paste anything: find the block or section ID first when a snippet should affect one thing rather than the whole site (right-click, Inspect, or the free Squarespace ID Finder extension), and add !important only when a snippet does nothing without it.

What can CSS change on Squarespace, and what can it not?

CSS changes how things look: colour, size, spacing, fonts, borders, hover effects, and whether something shows on mobile. It cannot add content, change what a block does, move a block to another section, or alter checkout and member areas, which Squarespace locks. Anything in that second list needs a different block, a Squarespace extension, or a code block with JavaScript. If the change you want is on the first list, one of the snippets below almost certainly covers it.

Header and navigation

1. Logo size (the panel slider stops earlier than you want):

.header-title-logo img { max-height: 70px !important; }

2. Navigation link colour and hover:

.header-nav-item a { color: #222 !important; }
.header-nav-item a:hover { color: #F3500F !important; }

3. Underline the current page in the menu:

.header-nav-item--active a { border-bottom: 2px solid currentColor; }

4. Header padding on mobile (tightens the space around a stacked logo):

@media screen and (max-width: 767px) {
  .header-inner { padding-top: 10px !important; padding-bottom: 10px !important; }
}

Buttons and links

5. Button hover state, which Site Styles does not offer; the button colour guide covers the non-hover colours:

.sqs-button-element--primary { transition: all .2s ease; }
.sqs-button-element--primary:hover {
  background-color: #222 !important; color: #fff !important;
  transform: translateY(-2px);
}

6. One button only, by block ID:

#block-YOUR-ID .sqs-block-button-element { background: #F3500F !important; border-color: #F3500F !important; }

7. Links inside text blocks (colour and a thin underline):

.sqs-block-html a { color: #F3500F; text-decoration: underline; text-underline-offset: 3px; }

Text

8. Heading size on mobile only:

@media screen and (max-width: 767px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
}

9. Font for one section (the font must already be selected or uploaded in Site Styles, as explained in changing fonts on Squarespace):

#section-YOUR-ID h2 { font-family: 'Playfair Display', serif !important; }

10. Narrower paragraphs so long lines stay readable:

.sqs-block-html p { max-width: 65ch; }

11. Blockquote styling:

.sqs-block-quote blockquote { border-left: 3px solid #F3500F; padding-left: 1.2em; font-style: italic; }

Sections and spacing

12. Less padding at the top and bottom of every section (the panel’s Small setting is often still too tall):

.page-section .content-wrapper { padding-top: 40px !important; padding-bottom: 40px !important; }

13. Section padding on mobile only:

@media screen and (max-width: 767px) {
  .page-section .content-wrapper { padding-top: 24px !important; padding-bottom: 24px !important; }
}

14. Hide a block on mobile (or on desktop with min-width: 768px). Newer 7.1 layouts have a per-block visibility setting that does this without code; use CSS for older layouts or to hide a whole section:

@media screen and (max-width: 767px) { #block-YOUR-ID { display: none !important; } }

15. Vertical line between columns, the short version of the vertical line guide:

#block-YOUR-ID { border-right: 1px solid #ddd; }

Images and media

16. Rounded corners on every image block:

.sqs-block-image img { border-radius: 12px; }

17. Soft zoom on hover for gallery images:

.gallery-grid-item img { transition: transform .4s ease; }
.gallery-grid-item:hover img { transform: scale(1.04); }

18. Darken a section background image without the overlay slider, useful when the panel’s overlay flattens the colour:

#section-YOUR-ID .section-background img { filter: brightness(0.7); }

Forms, footer and smooth scrolling

Footer text size, which Site Styles ties to the paragraph size:

.footer-sections .sqs-block-html p { font-size: 14px; }

19. Form field styling:

.form-item .field-element { border: 1px solid #ccc !important; border-radius: 6px !important; padding: 12px !important; }
.form-item .field-element:focus { border-color: #F3500F !important; outline: none; }

20. Smooth scrolling for anchor links, with the sticky-header offset from the anchor links guide:

html { scroll-behavior: smooth; }
.page-section { scroll-margin-top: 90px; }

How do you use a Squarespace CSS cheat sheet safely?

• Paste one snippet at a time and check the page; when something breaks you know which line did it.
• Comment each snippet with /* what it does */ so the next person (or you in a year) can read the file.
• Mobile first check: most CSS problems on Squarespace only show on a phone. Open the mobile preview after every change, and keep the media query syntax exact.
• Prefer the panel where it exists. If Site Styles can do it, CSS is the wrong tool; it stops the panel working for that setting and it is one more thing to maintain.
• Class names can change. Squarespace updates its markup occasionally; if a snippet stops working, Inspect the element and update the selector rather than stacking !important.

These are the snippets I carry between Squarespace website design projects, and the Squarespace tips and tricks post covers the settings-panel side of the same fixes for anyone who would rather not touch code.

Frequently asked questions