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.