How to create full width Map Block
Adding a map to your website helps users locate your business quickly and builds credibility—especially for local services or brick-and-mortar stores. But the default map block in Squarespace is often boxed and not full width, which can limit its impact.
In this blog, you’ll learn how to create a full width map block in Squarespace 7.1 that stretches beautifully across the screen—perfect for contact pages, location sections, or homepage footers. Please note this code works on Squarespace 7.1 only not Squarespace 7.1 FE.
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.
Table of Contents
Why Use a Full Width Map?
Visual Impact – A full width map gives a professional, polished appearance.
Better User Experience – It’s easier for visitors to locate your business without extra clicks.
Responsive Design – A full width map looks great on both desktop and mobile devices.
Complements Minimal Layouts – A large, clean map fits well with modern Squarespace templates.
Complexity: Easy
Step-by-Step Instructions
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
Key Takeaways
Squarespace map blocks can be made full width by placing them in stretched sections.
If template settings don’t support it, you can override layout limitations with custom CSS.
A full width map improves usability and adds a clean, modern aesthetic.
Always check responsiveness to ensure it looks good on both mobile and desktop.
FAQs
Is this method mobile-friendly?
Yes, especially if you use width.
Can I use a Google Maps embed instead?
Yes. Use a Code Block and paste the embed code from Google Maps. Wrap it with a custom class and apply the same full-width CSS.
Will this work on Squarespace 7.0?
Some templates in 7.0 may require different structure or more targeted CSS. The approach is best for 7.1.
Conclusion
Creating a full width map block in Squarespace is a small but powerful tweak that enhances your site’s design and usability. Whether you’re guiding visitors to your storefront or showcasing a service area, a large, full-width map can elevate your website’s presentation with minimal effort.
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.
