How to create full width Instagram block

Squarespace 7.1Tutorials
Written By Primitus Consultancy

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 customization 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.

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 (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

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

Use the following code snippet below.

Featured
side-bar-logo.png
Plugins-Button.jpg
Templates-Button.jpg
SEO-Button.jpg
11help-Button.jpg
 
[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. paste the code into the Custom CSS editor box.

Home Blog
Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous

How to change font size on mobile on Squarespace
Next

How to create a rotating text on Squarespace