Design Tip: Full Width Instagram Feed on Squarespace

I've been hanging out on Squarespace Facebook groups lately, every now and then someone needs a tweak and I kind of love digging in to see if there's a solution.  The latest one was regarding a full width Instagram feed that are pretty commonplace as popular Wordpress themes come with it (as seen below). 

Restored 316  (Market Theme)

Restored 316  (Market Theme)

How To Add A Full Width Instagram Feed to Your Squarespace Site

The question was (and I'm paraphrasing here):  can this be done in Squarespace?  Answer:  YES, and I'm going to show you how.  Please keep in mind that I'm using the Bedford theme but I believe this is generic enough to use in others as well (if not, let me know!).

1.  Add An Instagram Block To Your Pre-Footer Area

Delete any other blocks you have there (figure #1) and then in the top right corner click the white "+" to add the Instagram feed (figure #2).

Figure #1

Figure #1

Figure #2

Figure #2

2. Setup Your Instagram Feed

Go ahead and add your Instagram account if you haven't already.  Then on the Account section, set the number of Items to 10 (figure #3).  Switch over to the Design section and select options as seen below (figure #4).

Figure #3

Figure #3

Figure #4

Figure #4

3. Insert Custom CSS to Adjust Layout to Full Width

Now, go to Design -> Custom CSS and insert the following code:

.pre-footer .footer-inner, .pre-footer-inner {max-width:none;}

.pre-footer-inner .sqs-layout {padding:0;}

Save that and you should be good to go!  On mobile, it nicely formats to a 2 row format.  And that's it! 

Happy Squarespacing.  :)