Creating a full-bleed Instagram feed in Squarespace 7.1

Alright, let's talk about jazzing up your Squarespace site with a full-width Instagram feed! It's a slick design move that gives your website that extra pop.

So, you know how Squarespace lets you create those awesome full-bleed images that stretch from edge to edge? Well, unfortunately, the default Instagram block doesn't quite offer that same vibe out of the box. But don't fret! I've got the scoop on how to make it happen with a little bit of code.

Now, before we dive in, quick heads up: This trick is only for Squarespace 7.1, not the older 7.0 version.

Alright, let's get this party started!

Step 1: Add a New Section

First off, let's create a fresh section on your site where you want your Insta feed to strut its stuff. This could be anywhere – even in your footer if you're feeling adventurous! Set the Section Height to 10 in the settings.

Step 2: Add an Instagram Block

Now, let's plop an Instagram block into that shiny new section. Go to the page where you want it, usually towards the bottom, and add a blank section. Look for the Instagram block in the pop-up window and click to add it.

Step 3: Connect Your Instagram Account

Once you've added the block, connect your Insta account so it can pull in your feed. Under Connected Account just click Add an Account in the settings.

Step 4: Update Instagram Feed Settings

Now, let's tweak the settings to make your feed look just right. Adjust the number of posts and hop over to the Design tab to play with the layout. I like mine in a Grid layout with square images, 6 across and no padding.

Step 5: Add Custom CSS

Here's where the magic happens! We're going to add a bit of custom CSS to make that Insta feed go full-width.

Head to the Custom CSS panel and paste in the code I'll provide below.

INSERT DATA SECTION ID HERE .content-wrapper {
    max-width: 100%;
    padding: 0 !important;
    overflow-x: hidden !important;
}

INSERT BLOCK ID HERE {
    padding-top:0px!important;
    padding-bottom:0px!important;
}

But wait! Before you do that, you need to find the unique IDs for your section and block.

To find those IDs, you'll want to use a handy Chrome extension called Squarespace ID Finder. Install it, enable it, and voila! You'll see all the IDs for your sections and blocks.

Once you've got those IDs, replace the placeholders in the CSS with the real deal, hit Save, and boom – your Insta feed is now full-width!

And there you have it! A sleek, full-width Instagram feed to jazz up your Squarespace site. Easy peasy!