How To Change The Length And Width Of Horizontal Lines In Squarespace

When it comes to designing therapy websites, I love using Squarespace. The platform’s user-friendliness makes it easy for me to hand off websites to clients, knowing that they’ll be able to manage their new website with ease after the design & build is done. Part of the limitations of Squarespace, however, is that it’s user-friendliness sometimes translates as limited customization options. Point in case: the Line Block.

Squarespace’s horizontal Line Block comes in handy as a way to break up areas of text or to be used as a design element. However, the only style customization that can be made to horizontal lines, via Site Styles, is a color change. While a color change may be enough for most therapy websites, some therapists have asked me how to make the horizontal line thicker, or shorter.

In this post, I’m going to show you how to change the length and width of the Line Block in Squarespace both with and without custom code.

Changing horizontal line length without Custom CSS:

Before I get into solutions that require code, I want to show you a simple solution that doesn’t require Custom CSS. The easiest way to adjust the length of individual lines is with Spacer Blocks. You can place Spacer Blocks on either side of any Line Block to adjust the length of an individual line (in other words, the adjustment will apply to one horizontal line, not every single horizontal line on your website).

Step 1: Insert a Line block

Identify where you’d like to insert a horizontal line on your page, and select the Line Block.

Step 2: Insert two spacer blocks

Underneath the Line Block that you just inserted, insert two Spacer Blocks.

Step 3: Position the Spacer Blocks

Drag one Spacer Block to the left side of the Line Block, and the other Spacer to the right side of the Line Block. Adjust the width of the spacers to expand or contract the horizontal line to your desired length.

Note: as I mentioned, this solution will successfully adjust the length of one Line Block on Desktop view. The Line Block will revert to full-length when your website is being viewed on a smartphone.

Using Custom CSS to change horizontal line width and length:

“CSS” stands for Cascading Style Sheets, and it’s a type of code language that controls the visual style of your Squarespace website. The design tweaks that you make in the Site Styles panel automatically write CSS into your website, but Squarespace offers the option to include additional CSS to make changes beyond the standard style settings.

The following Custom CSS will create site-wide style rules. In other words, whatever width or length you set your horizontal lines will be the width or length for all Line Blocks throughout your website - even new Line Blocks that you add in the future. This can be really useful if you don’t want to worry about adjusting the width with Spacer Blocks every time you insert a new horizontal line, or if thicker lines just look better on your site design.

Step 1: Insert a Line Block

Identify where you’d like to insert a horizontal line on your page, and select the Line Block.

Step 2: Copy the following css

/* Horizontal Line */.sqs-block-horizontalrule hr {height: 2px; width: 100px}

Step 3: Paste the Css into your custom css panel

In your Squarespace control panel, navigate to Design > Custom CSS > paste the above CSS into the text box.

Step 4: Change the values to adjust as needed

Experiment by changing the numbers to adjust the width and length. You should see an immediate change to your Line Block as you change the number values. Note: “height” in CSS refers to the thickness of the line, “width” refers to the length.

Optional: If you only need to adjust the thickness of your horizontal lines, simply delete the “width” portion of CSS. Your code should look like this:

/* Horizontal Line */.sqs-block-horizontalrule hr {height: 2px}

Optional: If you only need to adjust the length of your horizontal lines, simply delete the “height” portion of CSS. Your code should look like this:

/* Horizontal Line */.sqs-block-horizontalrule hr {width: 100px}

Step 5: save & Refresh

After you’ve decided on the right thickness and length of your horizontal lines, click Save and Refresh to view your new horizontal line style!

Need more guidance?

Watch me implement the steps above on the Andrea website:
(video has no sound)

Using design to stand out

A detail as small as the lines on your website may not seem like that big of a deal to you, but it’s these small details that really do make all the difference in the eyes of your website visitors (aka potential clients). They may not consciously point to your horizontal line length as the reason they called you, but when each piece of your website design fits together and stands out from the sea of other therapy websites, potential clients will feel a sense of ease and confidence in you and your work. Making it that much easier to schedule that initial appointment.

To show you what I mean, here are some therapy websites that I designed that use custom lines:

• Canvas & Brush (pre-designed website)

• A Better Life Therapy (custom designed)

• Rising Practice (custom designed)

Whether you choose to customize your horizontal lines or not, know that therapy seekers are looking for something unique. So many therapy websites look and sound the same; the more you can use the small details of your website design to communicate aspects of your unique personality and therapeutic style, the easier the therapy search process becomes.