Primitus Consultancy

View Original

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.

See this content in the original post

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"]’

See this content in the original post

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.

See this gallery in the original post

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.