Line Block Style

 
 

The line block on Squarespace can be a great tool for breaking up content, however it is super limited in terms of customisation. These code snippets will allow you to change various style elements of the Horizontal Line block. 

The following code snippets need to be inserted into your main CSS Editor window. The values in bold can be changed to suit your site design. If you need help adding CSS to your Squarespace site please read our guide here.

Where colour values are added, you can either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB value (optional opacity values '0.8') e.g. rgba (255,255,255,0.8)

Margin

// REMOVE LINE MARGIN //

.sqs-block hr {
margin: 0;
}

Color

// LINE COLOR //

.sqs-block hr {
background-color: #fecb2f;
}

Height

// LINE HEIGHT //

.sqs-block hr {
height: 2px;
}

All together

// LINE STYLE //

.sqs-block hr {
margin: 0;
height: 2px;
background-color: #fecb2f;
}