How to add vertical text to your Squarespace site
Vertical text is trending right now and for good reason. It’s a great way to add style and dimension to your website design!
In this Squarespace tutorial, you will learn how to add vertical text to your website with a few simple steps. Let’s get started!
TO ADD VERTICAL TEXT TO YOUR SITE, GO TO DESIGN > CUSTOM CSS
Copy and paste the following code in the CSS editor:
// H4 VERTICAL TEXT
@media screen and (min-width: 640px) { h4 {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0 auto;
position: relative;
right: 10px;
}
}Notes:
1. If you take a quick look at the code, you can see that we’ve prompted my heading 4 to be vertical. If you’d like a different heading to be vertical, simply update the h4 to your liking (ex: h1, h2, h3 or h4).
2. The code provided above removes the vertical headings on mobile. We prefer this method because vertical text can be cumbersome on a small screen. If you’d like to include vertical text on mobile, use the following code:
h4 {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0 auto;
position: relative;
right: 10px;
}Click save. Now that we’ve included the code in our CSS editor, it’s time to test it! Make your way to the drag-and-drop builder and add a text block. Insert some text and update the heading to whichever you included in the code.
Like this tutorial? Do us a solid & share it on Pinterest!
Disclaimer: This blog post contains affiliate links. We may earn a small commission to fund our coffee drinking habit. You will not be charged extra, and you’ll keep us supplied in caffeine. It’s a win for everyone, really.
