How to make Instagram full width for Brine Template on Squarespace

How to make Instagram full width for Brine Template on Squarespace by Launch with Erika | Squarespace tips, squarespace css tricks, squarespace web designer, squarespace website, squarespace tricks, DIY website, bucketlist bombshells, website tricks, web design tips, web designer, brine template, instgram full width, instagram tips for squarespace

As I’m currently updating my website I decided to change my template to Brine template on Squarespace. I’m doing a whole brand refresh and I made several sketches of how I wanted my website to look.

I loved the idea of having my Instagram feed be full width. I tried to look for it online and I didn’t have any luck. There’s some CSS code out there that might work for certain templates but might not work for others. I was able to figure it out myself on how to add it to the Brine Template. I also want to note that I tried it in other templates in the Brine Family and it seems to be working fine.

I do want to say that I will detail exactly how I have it displayed on my website in case it doesn’t work for you for some reason.

Let’s get started!

1. Make sure you have your Instagram Account connected on Squarespace. If you haven’t done that yet go to Settings > Connected Accounts > Connect Account > Add Instagram.

2. Add an Instagram Block on your footer. I added it to the bottom footer. I am using the Grid Design for my Instagram feed with 5 items added to the feed. The Aspect Ratio being 1:1 Square, with 5 thumbnail images per row and 0 padding around the images.

 
Launch with erika- instagram feed.png
Launch with erika instagram feed.png
 

3. Now you can go and paste the CSS! Go to Design > Custom CSS and paste this in there:

//Instagram

.Footer-inner {padding: 0 0;}

#footerBlocksMiddle { max-width: 100%;}

Launch with Erika_instagram feed.png

Happy CSS'ing! I hope this helps! Comment below if this helped you solve your problem!


Launch With Erika Squarespace Web Designer | #squarespacetemplates #squarespacedesigner small business tips, DIY website, women in business, femepreneurs, bucketlist bombshells, squarespace CSS tricks, beauty and lifestyle, health coach, holistic coach, web designer, Squarespace tricks, Squarespace Templates, Website Templates, Squarespace Design Kit, Web Design Kit, DIY Web Design, Website Design Templates, E-Commerce Template, Blog Design Template, Squarespace Themes, Website Themes