How to Create a Full Width Instagram Feed in Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
One of my most requested tutorials so far had been how create a full width Instagram Feed on Squarespace. Well, wait no more!
Squarespace just released a brand new feature for page sections in version 7.1 called Section Divider.
I recorded a new tutorial, where you'll learn how to access these new design options and what your settings are.
Below you will find a tutorial and codes for all versions of Squarespace; Be sure you double check what site version you’re using.
Squarespace Version 7. 1
The code you need is below:
Be sure to watch the tutorial so you know how it works before you try it on your own site!
IG feed in the footer
#footer-sections .content-wrapper {padding-left:0!important; padding-right:0!important; overflow-x:hidden}
IG feed in a section
Make sure you count the sections and update the number (3) to the right one for your site!
.page-section:nth-child(3) .content-wrapper {padding-left:0!important; padding-right:0!important; overflow-x:hidden}
Squarespace Version 7 - Brine Theme
Here is the code from the tutorial:
Don’t forget to adjust the margin value for your own specific site padding settings! In this example, I am using view-width but you can also use percentage or px for that particular value.
.sqs-block-instagram{padding:0!important; z-index:99!important; width: 110%!important; margin-left:-5%}
Squarespace Version 7 - Bedford Theme
Here is the code for this tutorial:
Don’t forget to adjust the margin value for your own specific site padding settings! In this example, I am using view-width but you can also use percentage or px for that particular value.
.sqs-block-instagram{z-index:99!important; padding:0!important; width:150%; margin-left:-17vw}