Squarespace CSS Answers

How do I hide the header on a specific page in Squarespace?

Every page in Squarespace 7.1 gets a unique collection ID on the body or a wrapping div. You can use this to target CSS ...

How do I change the header background color in Squarespace?

Squarespace 7.1 uses the .header-theme CSS variable system for header colors, but you can override the background direct...

How do I make the header transparent in Squarespace?

A transparent header overlays your first page section instead of sitting above it. In Squarespace 7.1, set the backgroun...

How do I reduce the header height in Squarespace?

The header height in Squarespace 7.1 is mainly controlled by vertical padding on the header inner wrapper and the logo s...

How do I hide the header on mobile in Squarespace?

Use a media query targeting screens below 768px to hide the header on mobile. This is useful for landing pages or apps w...

How do I center the logo in the Squarespace header?

Squarespace 7.1 header layouts don't always offer a centered logo option in the design panel. You can force it with CSS ...

How do I change the dropdown menu background color in Squarespace?

The dropdown folder menus in Squarespace 7.1 use the .header-nav-folder-content selector. Override the background on thi...

How do I style the mobile hamburger menu icon in Squarespace?

The hamburger icon in Squarespace 7.1 is built with the .header-burger element, which contains line elements that make u...

How do I add an active page indicator to the navigation in Squarespace?

Squarespace 7.1 adds a .header-nav-item--active class to the current page's nav link. Use this to apply an underline, co...

How do I change the navigation font size in Squarespace?

Navigation link font size is controlled by the .header-nav-item a selector. You can set it to any size, but keep readabi...

How do I hide a specific navigation link in Squarespace?

You can hide a nav link by targeting its specific data attribute or using an nth-child selector. The cleanest method is ...

How do I remove 'Powered by Squarespace' from the footer?

The 'Powered by Squarespace' text lives inside a footer block with a specific class. You can hide it with a single CSS r...

How do I change the footer background color in Squarespace?

The Squarespace 7.1 footer uses the #footer or .sections--footer selector. Override the background-color on the footer's...

How do I center all the content in my Squarespace footer?

Footer blocks in Squarespace 7.1 often default to left alignment. You can force everything to center using text-align on...

How do I change the footer link color in Squarespace?

Footer links in Squarespace 7.1 inherit from the section's color theme. Override them with a direct CSS rule on #footer ...

How do I add a custom Google Font to Squarespace?

Add the Google Fonts stylesheet link in Settings > Advanced > Code Injection > Header. Then use CSS to apply the font to...

How do I change the heading font in Squarespace with CSS?

Squarespace 7.1 applies heading fonts through CSS custom properties and inline styles. To override them reliably, target...

How do I change the link color across my Squarespace site?

Global link colors in Squarespace 7.1 are set per color theme, but you can override them with a simple CSS rule on the a...

How do I style blockquotes in Squarespace?

Blockquotes in Squarespace 7.1 use the standard blockquote HTML element. You can style them with a left border accent, b...

How do I style the contact form input fields in Squarespace?

Squarespace 7.1 form inputs use the .form-item input and .form-item textarea selectors. Override their borders, padding,...

How do I change the form submit button color in Squarespace?

The form submit button in Squarespace 7.1 uses the .form-submit-button selector. Override the background-color and color...

How do I change the placeholder text styling in Squarespace forms?

Placeholder text uses the ::placeholder pseudo-element. You need to include vendor-prefixed versions for cross-browser s...

How do I change the form label size and style in Squarespace?

Form labels in Squarespace 7.1 use the .form-item .title selector. You can change the font size, weight, color, and marg...

How do I remove the borders from Squarespace form fields?

Remove all borders and add a subtle background color for a minimal, modern form look. This clean style works well on dar...

How do I add a sidebar to my Squarespace blog?

Squarespace 7.1 doesn't have a built-in blog sidebar, but you can create one by adding a code block or summary block nex...

How do I change the blog post title size in Squarespace?

Blog post titles on the listing page and on individual post pages use different selectors. The listing page uses .blog-t...

How do I hide the date on blog posts in Squarespace?

Blog post dates appear in the meta info section of each post. Squarespace 7.1 uses .blog-meta-item--date for the date el...

How do I style blog category tags in Squarespace?

Blog categories in Squarespace 7.1 appear as plain text links. You can transform them into pill-shaped badges with backg...

How do I change the Add to Cart button style in Squarespace?

The Add to Cart button in Squarespace 7.1 uses the .sqs-add-to-cart-button selector. You can override its colors, paddin...

How do I style the product price in Squarespace?

Product prices use the .product-price selector in Squarespace 7.1. You can increase the size, change the color, and styl...

How do I hide the quantity selector on Squarespace product pages?

The quantity selector on product pages uses the .product-quantity-input wrapper. Hide it when you're selling services, d...

How do I style the product variant dropdown in Squarespace?

Product variant selectors use the .product-variants select element. You can restyle the dropdown to match your site's fo...

How do I add a hover overlay to gallery images in Squarespace?

Gallery images in Squarespace 7.1 can be enhanced with a CSS overlay that appears on hover. Use a pseudo-element on the ...

How do I change the spacing between gallery images in Squarespace?

Gallery grid spacing in Squarespace 7.1 is controlled by the gap or margin on gallery items. The exact selector depends ...

How do I change the section padding in Squarespace?

Each section in Squarespace 7.1 uses the .page-section class. You can override the default padding globally or target sp...

How do I make a section full width in Squarespace?

Squarespace 7.1 constrains content within a max-width container. To make a section truly full-width, override the conten...

How do I hide a section on mobile in Squarespace?

Target the section by its data-section-id and wrap the display: none rule in a mobile media query. This hides the sectio...

How do I center content vertically in a Squarespace section?

Use flexbox on the section's content wrapper to vertically center everything inside. Set a min-height on the section so ...

How do I add a divider line between sections in Squarespace?

Add a top border to sections to create a divider line. Use the ::before pseudo-element for more control over the divider...

How do I change the button hover color in Squarespace?

Squarespace 7.1 buttons use the .sqs-block-button-element selector. Override the :hover state to set your custom hover c...

How do I make buttons fully rounded (pill-shaped) in Squarespace?

Set border-radius to a very high value (like 50px or 9999px) to create pill-shaped buttons. This rounds the corners full...

How do I add a border to buttons in Squarespace?

Ghost or outline buttons have a border and transparent background. They fill with color on hover for a satisfying intera...

How do I add a fade-in animation on scroll in Squarespace?

Squarespace 7.1 has some built-in animations, but for custom fade-in effects you need a small JavaScript snippet using I...

How do I add a hover zoom/scale effect to images in Squarespace?

A hover scale effect makes images zoom slightly when the cursor moves over them. The trick is overflow: hidden on the co...

How do I change or add page transitions in Squarespace?

Squarespace 7.1 doesn't have built-in page transitions, but you can add a fade-in effect on page load using CSS animatio...

How do I add a text entrance animation in Squarespace?

Entrance animations on headings create an engaging first impression. Use CSS keyframes with animation-delay to stagger e...

How do I find the CSS selector for any element in Squarespace?

Right-click any element on your Squarespace site and choose Inspect (or Inspect Element). This opens the browser's devel...

How do I change the background color of a specific section in Squarespace?

Each section in Squarespace 7.1 has a unique data-section-id attribute. Use this as a CSS attribute selector to change t...

How do I hide a specific element by its ID in Squarespace?

Every content block in Squarespace 7.1 has a unique block ID in the format .sqs-block followed by a data-block-id attrib...

How do I add a back-to-top button in Squarespace?

A back-to-top button improves navigation on long pages. Add it via Code Injection in the footer — the script creates a f...

How do I add a scroll progress bar to Squarespace?

A scroll progress bar shows readers how far through the page they are. It's a thin bar fixed to the top of the viewport ...

How do I change the body text size in Squarespace?

Body text size is set globally on the body or .sqs-block-content selector. Setting it on body affects everything, so tar...

How do I style the Read More link on blog posts in Squarespace?

The Read More link on blog listing pages uses the .blog-more-link selector. You can style it as a button, an underlined ...

How do I add a background image to the Squarespace header?

Set a background-image on the #header element to add a custom background. Use background-size: cover and background-posi...

How do I style the social media icons in the Squarespace footer?

Social icons in the Squarespace footer use SVG elements inside .sqs-svg-icon--social links. You can change their size, c...

How do I stack footer columns vertically on mobile in Squarespace?

Footer sections with multiple columns can overlap or squeeze awkwardly on mobile. Force them to stack vertically using a...

How do I change the shopping cart icon color in Squarespace?

The cart icon in the Squarespace 7.1 header uses SVG with the .icon--cart or .header-actions-action--cart selector. Chan...

How do I style gallery image captions in Squarespace?

Gallery captions in Squarespace 7.1 use the .sqs-gallery-caption or .gallery-caption selector depending on gallery type....

How do I make the header sticky (fixed) on scroll in Squarespace?

A sticky header stays visible as users scroll, keeping navigation always accessible. Use position: sticky on the header ...

How do I customize the product image zoom on Squarespace?

Squarespace 7.1 uses a lightbox-style zoom on product images by default. You can adjust the zoom cursor, transition spee...

How do I style the sale badge on Squarespace products?

The sale badge on Squarespace 7.1 product items uses the .product-mark.sale class. You can restyle it from the default r...

How do I style out of stock products on Squarespace?

When a product is sold out in Squarespace 7.1, the add-to-cart button gets a .sqs-editable-button-state-disabled class a...

How do I change the number of columns in the Squarespace product grid?

Squarespace 7.1 uses CSS grid for product listings. The .ProductList-grid container controls how many columns display. Y...

How do I add a count badge to the cart icon on Squarespace?

Squarespace 7.1 shows a cart count inside the .sqs-cart-quantity element next to the cart icon in the header. By default...

How do I style the mini cart sidebar on Squarespace?

The mini cart panel in Squarespace 7.1 uses the .cart-container and .Cart classes. When a product is added, a slide-out ...

How do I change the product description font on Squarespace?

The product description area on Squarespace 7.1 lives inside the .ProductItem-details-excerpt wrapper. You can target th...

How do I style the related products section on Squarespace?

Squarespace 7.1 auto-generates a related products section below the main product using the .ProductItem-related class. T...

How do I style breadcrumb navigation on Squarespace product pages?

Squarespace 7.1 includes breadcrumb navigation on product detail pages via the .ProductItem-nav class. Each breadcrumb l...

How do I style the shipping information section on Squarespace?

Shipping details on Squarespace 7.1 product pages typically appear inside an accordion or additional info block using .P...

How do I make a section sticky on Squarespace?

CSS position: sticky lets you pin a section or element in place as the user scrolls past it. On Squarespace 7.1, target ...

How do I add a parallax background effect on Squarespace?

Squarespace 7.1 sections with background images can be given a parallax effect using background-attachment: fixed. This ...

How do I create a split section with image and text on Squarespace?

Squarespace 7.1's section columns can be forced into a clean 50/50 split using flexbox. Target the .content-wrapper insi...

How do I make card grids equal height on Squarespace?

Squarespace 7.1 summary blocks and grid sections don't enforce equal card heights by default, so cards with different am...

How do I make tables responsive on Squarespace?

Tables added via code blocks or markdown in Squarespace 7.1 can overflow on mobile screens. Wrapping the table in a scro...

How do I adjust accordion section spacing on Squarespace?

Squarespace 7.1 accordion blocks use the .accordion-block class with individual items inside .accordion-item. The defaul...

How do I make a full-bleed banner section on Squarespace?

Squarespace 7.1 sections have a max-width content container by default that prevents true full-bleed layouts. You need t...

How do I change the content width on Squarespace?

Squarespace 7.1 uses a .content-wrapper with a default max-width that controls how wide your content area is. You can ov...

How do I vertically center content in a Squarespace section?

Squarespace 7.1 sections don't vertically center content by default. Using flexbox on the content wrapper with a minimum...

How do I create an asymmetric grid layout on Squarespace?

An asymmetric grid breaks the uniform column pattern to create visual interest — common on editorial and portfolio sites...

How do I create a grid/list toggle view for my Squarespace blog?

Squarespace 7.1 doesn't include a built-in grid/list toggle for blog pages. You can add one by injecting a toggle button...

How do I style the blog post sharing buttons on Squarespace?

Squarespace 7.1 blog posts include social share buttons via the .sqs-share-buttons wrapper. Each platform has its own cl...

How do I style blog tags on Squarespace?

Blog tags in Squarespace 7.1 appear as plain links inside the .blog-item-tags or .post-tags wrapper. By default they're ...

How do I style the blog author info section on Squarespace?

The author byline on Squarespace 7.1 blog posts uses the .Blog-meta-item--author class. If author profiles are enabled, ...

How do I style blog pagination on Squarespace?

Squarespace 7.1 blog pages use .BlogList-pagination for the older/newer post navigation at the bottom of the blog listin...

How do I control the blog featured image size on Squarespace?

Blog featured images on Squarespace 7.1 can be excessively tall depending on the uploaded image dimensions. Control the ...

How do I style the previous/next post navigation on Squarespace?

Squarespace 7.1 includes previous/next post links via the .BlogItem-pagination class at the bottom of individual posts. ...

How do I style the blog search bar on Squarespace?

The Squarespace 7.1 search block uses .sqs-search-page-input for the input field and .sqs-search-page-results for the re...

How do I remove the gap between the announcement bar and header on Squarespace?

Squarespace 7.1 sometimes adds a gap between the announcement bar and the header due to margin or padding on the .header...

How do I shrink the logo when scrolling on Squarespace?

When you enable a fixed/sticky header in Squarespace 7.1 and the user scrolls, the header gets a .header--menu-open or s...

How do I show a different header style on a specific Squarespace page?

Every Squarespace 7.1 page adds a unique class to the body element based on the collection ID, formatted as .collection-...

How do I add a CTA button to the Squarespace header?

Squarespace 7.1 lets you add a "button" style to header nav items through the design panel, but the default styling is o...

How do I style social icons in the Squarespace header?

Squarespace 7.1 renders social icons in the header using the .header-actions-action--social wrapper. Each icon is an inl...

How do I create a multi-column mega menu on Squarespace?

Squarespace 7.1 folder dropdowns render as a single vertical column by default. You can convert these into a multi-colum...

How do I style the search bar in Squarespace navigation?

The Squarespace 7.1 header search is triggered by a search icon in .header-actions-action--search. When clicked, it expa...

How do I add breadcrumb navigation to Squarespace?

Squarespace 7.1 doesn't include breadcrumb navigation by default (except on product pages). You can add breadcrumbs manu...

How do I animate the mobile menu on Squarespace?

The Squarespace 7.1 mobile menu uses .header-menu and transitions between hidden and visible states. By default the anim...

How do I swap the logo on scroll in Squarespace?

When you have a transparent header with a white logo over a hero image, the logo becomes invisible against a white stick...

How do I customize the scrollbar on Squarespace?

WebKit-based browsers (Chrome, Safari, Edge) support custom scrollbar styling via ::-webkit-scrollbar pseudo-elements. F...

How do I change the text selection highlight color on Squarespace?

The ::selection pseudo-element controls what color appears when a visitor highlights text on your site. By default it's ...

How do I add a loading spinner to Squarespace?

Squarespace 7.1 doesn't have a built-in page loading spinner. You can add one by injecting a spinner overlay via code in...

How do I add a print stylesheet to Squarespace?

A print stylesheet hides navigation, sidebars, and interactive elements so that when a visitor prints a page, they get c...

How do I enable smooth scrolling on Squarespace?

CSS smooth scrolling makes anchor link jumps and back-to-top buttons glide instead of snapping. It's a one-line addition...

How do I disable right-click on Squarespace?

While disabling right-click isn't a true security measure (determined users can always bypass it), it does discourage ca...

How do I add a custom cursor to a specific element on Squarespace?

The CSS cursor property lets you set custom cursors on specific elements. You can use built-in cursor types like crossha...

How do I truncate text with an ellipsis on Squarespace?

Single-line truncation uses text-overflow: ellipsis with white-space: nowrap. For multi-line truncation (e.g., limiting ...

How do I hide an element on mobile only on Squarespace?

Squarespace 7.1 has a built-in option to hide blocks on mobile in the editor, but it's limited. CSS media queries give y...

How do I style the password-protected page on Squarespace?

Squarespace 7.1 password pages use the .sqs-password-page class as the main container. The form, input field, and submit...