Full Width Blocks in Squarespace

Other PluginsFree

Feb 10

Any block added to our Squarespace website has to fit into the 12-column layout that Squarespace provides. This tutorial teaches how to break a block outside of that 12-column layout.

Plugin
Check out my video element plugin to learn more about the video elements I used in this tutorial.

Demo

Usage

Add the below code into your Design » Custom CSS area.

Using the Squarespace ID Finder, replace the #block-id with the specific block-id of the block you want to go full width.

Adjust the max-width property to set a max-width of the element. If you don’t want a max-width set, leave that value as initial.

The Code

  
/**
* Full Width Block
**/
#block-id {
  padding: 17px 0px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  .sqs-block-content{
    max-width:1250px;
    margin:auto;
  }
}
  

If you only want this to apply to your block on mobile, try wrapping all of this code in a media query.

  
/**
* Full Width Block
**/
@media(max-width:767px){
  #block-id {
    padding: 17px 0px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    .sqs-block-content{
      max-width:1250px;
      margin:auto;
    }
  }
}
  