How to create full width Scrolling block

This tutorial will show you how to create a full width scrolling block on Squarespace. Please note this code works on Squarespace 7.1 only.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

Complexity: Easy

---

Step 1

Identifiy the Section ID the map is placed using the plugin mentioned above

---

Step 2

From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

[YOUR DATA SECTION ID GOES HERE] {
  .content-wrapper {
    padding: 0!important;
    max-width: 100%!important;
  }
 .sqs-layout > .sqs-row { margin: 0!important; }
  .sqs-row .sqs-block.map-block {
    padding: 0!important;
  }
}

---

Step 3

Replace the [YOUR DATA SECTION ID GOES HERE] with the actual Section ID, in this example the Section ID is ‘section[data-section-id="62209c00411da57180ef04e6"]’

section[data-section-id="625712951599a84588882ef6"] {
  .content-wrapper {
    padding: 0!important;
    max-width: 100%!important;
  }
 .sqs-layout > .sqs-row { margin: 0!important; }
  .sqs-row .sqs-block.map-block {
    padding: 0!important;
  }
}

---

Click here more information on how to create full width Instagram block

Click here more information on how to create full width Map block

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.