Create A Full Width Instagram Feed On Squarespace

 

In this tutorial, I’m going to show you very quickly how you can create a page that allows your Instagram feed block to go all the way across the full width of your Squarespace page.

Some people put this in their footer. I don’t do it that way. I like to create an index and put it in one of the pages of that index within Squarespace. That way it doesn’t always show in my footer in case I am wanting to create a sales or landing page with a specific focus or purpose.

So let’s go through this step by step. I’m showing exactly what I have done on my website. I use the Rally Template which is part of the Brine family. Depending on what template and family it is a part of, your CSS may look slightly different. Here is what it should like once we are done in your CSS editor.

/* INSTAGRAM BLOCK FULL WIDTH CSS */

#instagram-1 {.Index-page-content {max-width:none;}
.Index-page-content {padding:0;}}

Part 1 – Make sure your instagram account is linked.

1. Go to Settings > Connected Accounts > Connect Account > Instagram

Part 2 -Setting up the Index page and block

1. Create a page in an index specifically for the Instagram feed block.

2. Insert the Instagram block. I have set mine to eight images wide. I like no space in between the gutters.

3. The next thing you need to identify is what your URL slug is. This is important for when we add some custom CSS. You can find it by looking at the settings for your page. Mine is Instagram-1.

Part 3 -Custom CSS

1. Go to Design > Custom CSS

2. Label your CSS so you can easily find it by framing the text using forward slash asterisk and the asterisk, forward slash like this:

/* INSTAGRAM BLOCK FULL WIDTH CSS */

3. Type hashtag (#) with the URL slug of the very end of it as your label. Like this: #instagram-1

4. Copy/paste this CSS that will remove the padding from both sides of your website:

#instagram-1 {.Index-page-content {max-width:none;}
.Index-page-content {padding:0;}}

So that’s how you create a full width page in Squarespace using up just a little bit of custom code.

Now this is specifically set up for index pages in the Brine family of templates. It won’t work if you tried to do this someplace else, like your footer. You’ll have to use different # labels such as #footer.

However, I like doing it this way because I can easily duplicate the page and insert it elsewhere on my site in other indexes quickly.