How to create a full width section in Squarespace 7.1

Tired of staying within the confines of Squarespace’s built-in layout boundaries?

By default, Squarespace’s 7.1 sections don’t span the full width of the page. Luckily, anything is possible with a little CSS magic!

We love adding full width sections to our designs — they create a modern look with dimension (while using space efficiently!). Win, win.

You can find an example of a full-width sections in our Squarespace 7.1 template Soul.

Step 1:
Add a new section & build out your content

In the drag and drop builder, add a new section and insert desired design elements.

Step 2:
Add CSS

1. Go to Design > Site Styles > Custom CSS

2. Copy and paste the following code snippet:

// FULL WIDTH SECTION

section[data-section-id="607f43546f5eca166748c0e5"] {
overflow-x: hidden !important;
overflow-y:hidden !important;
}

section[data-section-id="607f43546f5eca166748c0e5"] {
.content-wrapper  {
  padding: 0px !important;
  margin: 0px auto;
  display: contents;
  }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
}

Step 3:
Update the section ID’s

Let’s start with “data section ID”:

To create a full width section, we’ll need to identify the “data section ID”.

Data section ID’s target the specific ID’s attached to a section of a page on your website.

Here is an example of a data section ID: section[data-section-id=“5f80eb87697bef48c00edeeb”]

To identify section ID’s, there’s a super handy Google Chrome extension that will magically show you the data section ID for every section on your website with the click of a button. Best of all, it’s free!

Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the block codes and ID’s for all of the sections of your site.

Now, go to the top of the section you would like to hide on mobile and look for the blue sticker that reads section{data-section-id………..}.

Click on the blue sticker and the data section ID will automatically be copied to your clipboard.

Step 5:
Replace section ID

Now that you know how to identify data section ID, let’s replace it in the code provided above:

1. Enable Squarespace ID finder extension and click on the blue section ID sticker that correlates with the Instagram feed section

2. Replace section ID in the code snippet above

3. Make sure to replace BOTH section ID’s in the code snippet

4. Save and refresh your site — you should now have a full width section

Save this post on Pinterest and come back to it later!

More tutorials