Expanding the Instagram Block to full width

One of the easiest way to customize any Squarespace site is to expand its blocks to the full width of your design to contrast with the content that has some spacing on the sides.

In today’s post we’ll be looking at how to do that with the Instagram block.

This will allow you to use a nice little strip of images as a divider for any part of your website or to mark the end of the content and the beginning of the footer!

Creating an Instagram full width strip in Squarespace

We’ll start off by adding an Instagram block inside an index section.

I’m using one of the Brine templates but you can use any other that allows to create indexes, just note that the code and process may be slightly different in that case.

1. Expanding Instagram block in Squarespace.png

Next, I’ll add a colorful background to the entire section so it’s easier to see if there are any borders or space remaining after we implement the code.

To do this, I’ll be targeting the specific section through its URL slug.

I named mine instagram as you can see through my Inspect Element window:

2. Targeting index section in Squarespace with CSS.png

I’m gonna plop that ID inside my Custom CSS window, but I’m gonna use it along with the element selector as well (section) since the ID instagram is also used by Squarespace to name the Instagram block option under Social Blocks:

Adding an instagram block in Squarespace


Which means that if I use the ID on its own like this:

#instagram {
  background: #DADED1;
}

… I’m gonna give that block option a nice background color too!

(Guess how I found it it’s called the same way, lol)

Selecting the Instagram block in Squarespace


So anyway, instead of targeting just #instagram, I’ll be using section#instagram, so my browser knows I’m talking about the INDEX section and not the SOCIAL BLOCK.

section#instagram {
  background: #DADED1;
}
3. Adding background color to index section in Squarespace.png


Oki doki!

Now, in order to stretch our Instagram block full width we need to understand why it’s not full width right now.

One of the reasons could be that the block itself has a max-width that keeps it restricted to a maximum size.

Another reason could be that the container holding it has some padding or a max-width that’s keeping from getting bigger.

If we look at the inside of our instagram index section we’ll notice we’re dealing with the latter:

4. Removing padding from index section in Brine.png

See the green frame and orange bars? We need to get rid of the one on both sides.

The green bars are just a little bit of padding we need to remove to make sure the block isn’t constrained by it.

But the orange part, the margin, is the biggest constraint here.

If we take a closer look at the Inspect Element window you’ll notice that the margin is actually set to auto, which means that it’s spreading evenly based on the space that remains outside of the MAX-WIDTH that has been set for the section.

8. Stretching Instagram block in Brine.png

So, if we change that current max-width to 100% instead of a fixed number, our index section content will expand across the entire width of our green area, which in turn will make our Instagram block expand full width as well!

All of this translated into code looks like this:

section#instagram .Index-page-content {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}
9. Making Instagram block full width in Brine index.png

And here’s our full width Instagram block in all its glory!

10. Instagram strip in Brine index section Squarespace.png

Until next time,

B.

 

Full code

section#your-url-slug .Index-page-content {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}
 

More Squarespace tips & tricks this way