How to create vertical text in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

I try to keep up to date on design trends thanks to visual sharing sites like Dribble and Pinterest.

One I keep seeing over and over and over was vertical text headers– Headline text rotated 90 degrees to read up and down instead of left to right.

But I also saw it on mobile sites and it looked TERRIBLE on a tiny screen #IMHO

So I got to work writing a custom CSS code to share with you in this tutorial: how to create vertical text that resets on mobile, keeping your website usable and gorgeous on all devices.

You can copy and paste the code below to have this work for the different heading text styles on your site. The names for those text types in both Squarespace 7 & Squarespace 7.1 are below.

If you want to update this to work with any text type you want to use by replacing H2 with it’s code name! And be sure to adjust the margin to really fit the look of your site.

Heading One Font

@media screen and (min-width: 640px) { h1 { transform: rotate(-90deg); margin-left: -80vw; position: relative; right: 10px; } }

Heading Two Font

@media screen and (min-width: 640px) { h2 { transform: rotate(-90deg); margin-left: -80vw; position: relative; right: 10px; } }

Heading Three Font

@media screen and (min-width: 640px) { h3 { transform: rotate(-90deg); margin-left: -80vw; position: relative; right: 10px; } }

Normal Font - Paragraph 2 for Squarespace 7.1 sites

@media screen and (min-width: 640px) { p{ transform: rotate(-90deg); margin-left: -80vw; position: relative; right: 10px; } }