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}

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

How to Create an Instagram Link Page in Squarespace

Next
Next

How To Create a Three Column Footer in Squarespace 7.1