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

 


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.

Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

How to flip an image on hover

Next
Next

How to upload mp4 files that autoplay and loop on Squarespace