How to create full width Instagram block

In this tutorial, you will learn how to create a full-width Instagram block on your Squarespace 7.1 website. By following the steps provided, you'll be able to seamlessly integrate an Instagram block that spans the entire width of your webpage. This customisation is perfect for showcasing your Instagram feed or specific posts in a visually engaging manner. Follow along with the tutorial to create a captivating, full-width Instagram block on your Squarespace 7.1 site and enhance the overall aesthetic of your website. Note this will not work for Squarespace 7.1 FE.

Table of Contents

• Why Make Your Instagram Feed Full-Width

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Make Your Instagram Feed Full-Width?

• More Impactful Visuals: A full-width layout gives your Instagram feed a bold, modern feel and helps your images stand out.

• Better Design Integration: A full-width Instagram block aligns with other full-width sections, maintaining visual consistency in your design.

• Enhanced Mobile Responsiveness: With custom CSS, your Instagram block will look great across all screen sizes.

Complexity: Easy

---

Step 1: A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder.

You will need it to identify the data-section the code is to apply to.

Use the following code snippet below.

[YOUR DATA SECTION ID GOES HERE] {
min-height: initial!important;
.content-wrapper {
padding: 0!important;
max-width: 100%;
}
[#YOUR INSTAGRAM BLOCK ID GOES HERE] {
padding: 0!important;
}
.sqs-layout > .sqs-row {
margin: 0!important;
}
}

Step 2: From your Squarespace account, go to the Custom CSS Editor and paste the code into the Custom CSS editor box.

---

Key Takeaways

• The default Squarespace Instagram block is limited by the page's content width.

• With a bit of CSS, you can easily extend it to full screen width.

• This approach works in Squarespace 7.1 only not 7.1 FE.

FAQs

Will this affect other blocks on my page?
No, the custom class ensures only that specific block is targeted.

Can I make the Instagram block full-width only on desktop?
Yes, wrap the CSS in a media query

My Instagram feed isn’t showing. What do I do?
Make sure your Instagram account is connected under Settings > Connected Accounts, and check that Squarespace has access to display the feed.

---

---

Conclusion

Creating a full-width Instagram block in Squarespace is a fantastic way to boost the visual appeal of your website. It aligns well with modern web design standards and helps seamlessly integrate your social media content into your site.