How to align images on Squarespace

When designing your website, image alignment plays a key role in creating a visually appealing layout. Whether you're showcasing products, galleries, or blog visuals, how your images align can greatly impact your site's overall aesthetic and usability.

In this tutorial, I’ll walk you through how to align images on your Squarespace 7.0 or 7.1 website using custom CSS. Squarespace provides limited alignment options by default, but with a little code, you can take full control of how images are displayed on your site.

A useful tool you can use to identify the #collection-id and #blockidnumber is a Chrome Extension called Squarespace Collection/Block Identifier.

Table of Contents

• Why Align Images Manually

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Align Images Manually?

While Squarespace allows you to insert images within text blocks and galleries, it doesn’t offer flexible positioning like left, right, or center alignment for standalone images—especially when working with image blocks. This is where custom CSS becomes essential for precise layout control.

Complexity: Easy

---

Step-by-Step Instructions

From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the necessary code.

Use this code to align images on a specific page

.sqs-block-image .intrinsic {
 margin-left: 0px !important;
 }


.sqs-block-image .intrinsic {
 margin-right: 0px !important;
 }   

Use this code to align images in a specific section (left)

#collection-id {
#page .page-section:nth-of-type(1) {
 .sqs-block-image .intrinsic {
 margin-left: 0px !important;
 }
}
}

Use this code to align images in a specific section (right)

#collection-id {
#page .page-section:nth-of-type(1) {
 .sqs-block-image .intrinsic {
 margin-right: 0px !important;
 }
}
}

Use this code to align a specific image (left)

#blockidnumber {
.sqs-block-image .intrinsic {
 margin-left: 0px !important;
 }
}

Use this code to align a specific image (right)

#blockidnumber {
.sqs-block-image .intrinsic {
 margin-right: 0px !important;
 }
}

---

Key Takeaways

• Squarespace has limited built-in image alignment features.

• Custom CSS allows for more control over how images are positioned.

• You can align images globally or target specific image blocks using block IDs.

FAQs

Can I use these CSS snippets on both 7.0 and 7.1?
Yes, these snippets work across both versions of Squarespace.

What about image galleries?
Gallery blocks have their own structure and may require different targeting for alignment. Let me know if you want a guide on that too.

Will this work on mobile?
Yes, but you can use media queries to adjust alignment per screen size if needed.

---

---

Conclusion

Aligning images on Squarespace is simple with the right CSS. Whether you want to center, left-align, or right-align your visuals, this tutorial gives you the flexibility to create a clean, professional layout that matches your brand’s design.