This is one of my favorite custom CSS snippets for any Squarespace 7.1 website. It’s a modern, clean look and keeps things fresh by automatically updating as you add to your Instagram feed.

It’s an artistic way to showcase your latest Instagram posts and to create a little evergreen content on each page of your website.

UPDATE SEPT 2022: Squarespace released a major update to their 7.1 platform called FLUID ENGINE, a drag-and-drop page editor that replaces the Classic Editor described below. At this time, it’s an "optional” upgrade that can be utilized for existing 7.1 platform users, but that may change in the future. Scroll down for the tutorial in Fluid Engine at the bottom of this post.

How to create a stylish full-width Instagram feed in your footer (Classic Editor)

While Squarespace does have an Instagram block that’s easy to add to any page or content section, the customization is limited and sometimes leaves things looking a little, well template-y.

But with a bit of custom CSS, you too can add this cool feature to the footer of your Squarespace website.

1) Connect your Instagram account through the Squarespace dashboard

You’ll be asked to connect your account by logging into Instagram and giving Squarespace permission to access it.

Go to: Settings > Connected Accounts > Connect Account > Instagram

2) Edit the footer section of your website

While in Edit mode on any of your website pages, scroll down and click on Edit Footer. Add a new section to your footer. I prefer to make it the top section of the footer, above everything else.

3) Add the Instagram block to your website footer

Next, add an Instagram block and adjust your settings. I have set mine to eight images wide with no space in between the gutters. However play around with it to see what you like, or set the preferences to what suits your brand. Click on the Design tab within the same window and select “Carousel”.

4) Add the custom CSS

Navigate to the custom CSS settings panel.

Go to: Website > Website Tools > Custom CSS

Copy and paste the following CSS code:

/*Instagram block footer full width*/

[data-section-id="yourIDnumber"] .content-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x:hidden !important;
max-width: 100%;
}

I also like to add an optional extra line of code to the above so that my IG feed sits flush with the section above it with no top padding:

padding-top: 0 !important;

You’ll need to replace the yourIDnumber with the real section ID number of your footer section.

5) View the results on your website.

Save and then refresh your website. You’ll see the beautiful results in the footer section of your website!

How to create a stylish full-width Instagram feed in your footer (Fluid Engine)

With the launch of Squarespace’s Fluid Engine editor, you can now add a full-width Instagram feed without the use of custom code!

You still need to follow the steps to connect your Instagram account, as outlined below:

1) Connect your Instagram account through the Squarespace dashboard

You’ll be asked to connect your account by logging into Instagram and giving Squarespace permission to access it.

Go to: Settings > Connected Accounts > Connect Account > Instagram

2) Add the Instagram block to your Squarespace website footer

While in Edit mode on any of your website pages, scroll down to the footer area and click on Edit Footer. Add a new section to your footer (this is an optional step - you can also add the Instagram block to an existing section of your footer). Click on +ADD BLOCK and choose the Instagram block under Integrations.

3) Select your connected Instagram account

Click on the pencil icon to edit the Instagram block settings, and click on the Account tab. From the dropdown menu, select your connected Instagram account. Then select the number of thumbnails per row. Since I’m doing a single row feed for this demo, I’ll select 8 thumbnails.

At this point, you should see your Instagram posts populate within the block. But we’ll need to make some setting adjustments.

4) Edit the Instagram block settings

While still in the settings of the block, click on the Design tab. Select GRID and choose your desired aspect ratio. I’m using a 1:1 square aspect ratio in this example.

Adjust the other settings to your liking. In this demo I’ve chosen to show the 8 most recent posts, with “0” padding around each image.

Be sure the option for “Open Links in New Window” is selected.

5) Create a full-width block

Once your settings are in place, simply drag the left and right handles of the Instagram block to the left and right edges of your site to resize it to full-width - and that’s it!

Don’t forget to SAVE your page.