How to Make a Vertical Line in Squarespace with Custom CSS

How to Make a Vertical Line in Squarespace on Desktop Only Using the Horizontal Line Block

 Now, you might be wondering, why would I want to take a horizontal line and turn it into a vertical line on desktop only in Squarespace?

Well, if you like neat little vertical dividers to separate content like hyperlinks (see example below), you might be thinking, “Well, I could just do that on my keyboard by selecting the vertical divider on my keyboard, right?”

The problem with this is that when you view it on mobile, it’s going to end up looking all smooshed together and messy. And if it’s hyperlinked text, it can be really hard to select the right hyperlink because it’s all so close together.

In this tutorial, I’m going to walk you through the steps of turning a horizontal line block in Squarespace vertically to make a vertical line in Squarespace on Desktop only.

 
How to make a vertical line in Squarespace
 
 

Why You Want to Create a Vertical Line on Desktop Only

You can see on the above picture (scroll up) that the vertical line looks nice and tidy, but a vertical line on mobile (unless your design skills are better than mine, which is a distinct possibility) just won’t look right.

But good news! A horizontal line on mobile works beautifully.

Below are 2 pictures. The first one shows what this would look like on mobile if I used the vertical line from my keyboard, making it all look smooshed together.

The second picture shows what this menu looks like on mobile with a horizontal line. I have the line positioned horizontally on mobile and vertically on desktop (as pictured above).

 

Using vertical line from keyboard

Vertical lines from keyboard option
 

Using line block on mobile only

Horizontal block on Squarespace mobile
 
 

How to Make a Vertical Line in Squarespace

Essentially what you’re doing is taking a line block, which is inherently horizontal, and turning it 90° 

Here’s how you do it:

  1. Add your line blocks making them approximately the size you want them to be and place them approximately where you want them to be on your page

  2. Hit save

  3. Head over to Pages > Website tools > Custom CSS

  4. Copy and paste the code below (scroll down) right here and hit save

  5. For this next step, you're going to need the Squarespace ID Finder installed on your Chrome browser

  6. With your CSS window still open, select the Squarespace ID Finder extention from your browser and locate the block IDs for the line block that you are wanting to turn from horizontal to vertical

  7. Select the block ID and it will automatically copy to your clipboard

  8. Back in your CSS window, highlight the code where it says, “BLOCK ID GOES HERE” and paste it

  9. If you have multiple lines that you want to turn vertically, add a comma after the block ID you just pasted

  10. Select the block ID of another line block that you want to turn vertically, just as you did in step 7

  11. Come back over the CSS window and past it directly after the comma you added—DO NOT ADD ANY SPACES

  12. Now deselect the extension so all those block IDs will disappear and you can see what you’re doing

  13. Resize the line blocks to whatever size you want them to be and move them around until they are in the position that you want them to be in—you’ll have to play with it a little

  14. Now go to the mobile view, move things around, change the size, do whatever you want, and it's not going to affect anything on the desktop version

  15. Save everything, sit back, and admire your handiwork because you’re a genius!

 
 

Code Snippet

 
 
/* Turn line vertical desktop only */

@media screen and (min-width:767px) {
BLOCK-ID-GOES-HERE {
  transform: rotate(-90deg) !important; 
  margin-left: 0vw; 
  position: relative;  
  }
}
 
 
 
 

Who Deserves the Credit for This

My dear friend Jessica Miller who is a fellow Squarespace Web Designer, and a darn good one! I saw her do this on a website she helped me with and now I’m addicted. I’ve used it on my own and also on a client’s.

Thanks Jessica!

 

Was this helpful?

So, what do you think? Are you going to use this too? How? I’d like to know how others are using this in application, so share the love in the comments below 👇


 
 

This page contains affiliate links

 
 

My Insta

@jenxwebdesign

 

Like this post?

Pin It to Pinterest 👇

How to Make a Vertical Line in Squarespace with Custom CSS
Jennifer Barden

This article was written by Jennifer Barden, founder of Jen-X Website Design and Strategy.

Many Squarespacers feel defeated when their websites don’t attract and engage visitors.

In my blog, I share my secrets for effective Squarespace website design and strategy so that DIYers and Squarespace Website Designers can learn tips for building Squarespace websites that attract and engage the right visitors.

https://jenxwebdesign.com
Next
Next

Is Squarespace Keeping Up with the Latest in Blogging Technology?