How to create full width Map Block

This tutorial will show you how to create a full width map 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

Identify the Section ID. The map is placed using the plugin mentioned above.

---

Step 2

From your Squarespace account, go to the Custom CSS Editor and 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="62209c00411da57180ef04e6"] {
  .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 for more information on how to create full width Instagram 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, expressed 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.