SQS Toolbox
SQS Toolkit
Utilities

Full Width Image & Video Blocks in Squarespace

Thumbnail for Full Width Image & Video Blocks in Squarespace

Desktop + Mobile

/**
* 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;
  }
}

 

Mobile Only

/**
* 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;
    }
  }
}


References: Ahmad Shadeed, CSS Tricks

View Source

Last Updated: 5/1/2025