How to create a full width Instagram feed in Squarespace 7.1

Crafting a visually stunning website is a breeze with Squarespace's feature-rich design options, including the ability to seamlessly integrate full-bleed content. Full-bleed content, characterized by its expansive reach from one edge of the browser window to the other, adds a touch of dynamism and sophistication to any website.

However, it's essential to note that not all content blocks, such as the Instagram block, inherently offer a full-width option. In the case of the default Instagram feed block in Squarespace, achieving a full-width effect requires a bit of code. I'll guide you through the process of adding this code to elevate the visual impact of your Instagram content and create a stunning, immersive experience on your Squarespace site.

There Is A Step by Step Guide for Create A Full Width Instagram Feed in Squarespace 7.1

To begin, let's take a new section into your site, choosing the location where you want the Instagram feed to be displayed. This section can be placed anywhere on your page, even in the footer area if you prefer. In the section settings, specifically under Format, adjust the Section Height to 10.

Add an Instagram Block to Your Page Section

Proceed by adding an Instagram block into the designated section. Navigate to the specific page on your Squarespace site where you intend to feature the Instagram feed. While many websites position the Instagram feed near the bottom of the page, just above the footer, you have the flexibility to place it wherever suits your preferences.

While in Edit mode, initiate the addition of a new blank section to your page. Within the ensuing pop-up window, locate the Instagram block and click on it to seamlessly integrate it into the chosen section.

Link Your Squarespace Page to Instagram

After adding the Instagram block, you'll notice placeholder images and a pop-up menu. To link your Instagram account and display the feed, navigate to the pop-up menu.

Under the Connected Account section, choose Add an Account to initiate the connection process.

Adjust Instagram Display Settings

After successfully linking your Instagram account to Squarespace, proceed to tailor the appearance of your Instagram feed.

Navigate to the settings below the drop-down menu, where a slider allows you to determine the number of posts visible on your site. For my layout, I've opted for 6 images across, but adjust according to your preferences.

Now, head to the Design tab to personalize the aesthetics of the Instagram feed block. Here are the settings I've chosen:

Layout: Grid

Aspect Ratio: 1:1 Square

Crop Images: Yes

Thumbnails Per Row: 6

Padding: 0

The padding setting controls the spacing between your Instagram images. To eliminate any white space between images, I've set it to 0. Adjust as needed for your desired visual appeal.

ADD CUSTOM CSS 

To achieve a full-width Instagram feed on your Squarespace site, we'll utilize custom CSS to eliminate default padding. Follow these steps:

Navigate to the Custom CSS panel (Design > Custom CSS).

Copy and paste the provided code:

CSS:

#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;
}

Replace "INSERT DATA SECTION ID HERE" with your specific section ID.

Replace "#INSERT BLOCK ID HERE" with your unique block ID.

Ensure your Instagram feed achieves the desired full-width appearance by customizing these IDs accordingly.