How to align images on Squarespace

In this tutorial, I will show you how to align images your 7.1 Squarespace website.

There may be some situations where you will like to align your images on your site and we can use some custom css codes to achieve this .

A useful tool you can use to identify the #collection-id and #blockidnumber is a Chrome Extension called Squarespace Collection/Block Identifier (https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde) which I fully recommend.

Complexity: Easy

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;
 }
}