Radka Olejnakova

Best way to create responsive vertical text in Webflow

Written by
Radka Olejnakova
Published on
February 16, 2023

If you've ever needed a piece of vertical text for your design, then you know how frustrating it can be to develop. Unnecessary wrapper divs, applying rotation, transform origin, but it never looks quite right.

Well, you're in luck since there is a better, easier and more responsive way to create any vertical text!

Text-Orientation CSS

This trick involves a CSS property you probably haven't heard of, "text orientation." Although it's not possible to edit this property directly in the editor, you can do so with a very short custom code snippet.

For demonstration purposes, I created this very simple layout with an image and a text block with a 'horizontal-text' class on top of the image.

demonstration of an image and a text block with a 'horizontal-text' class placed horizontally on top of the image

Now, let's rotate the text. All that's needed is the following code snippet:

.horizontal-text{writing-mode: vertical-rl}

I recommend putting custom CSS code in the page or project settings, inside the <head> tag. The effect will only be visible on the published website, not in Designer.

If you want to also be able to preview this effect in Designer, you can add an embed element anywhere on the page, and paste the code there instead.

an image and a text block with a 'horizontal-text' class on top of the image, this time it's placed vertically

If you're interested in learning more about this CSS property, you can read the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation


Occasionally, especially with more complex designs, the vertical text element can move in weird ways, to places you don't want it to. From my experience, that happens mostly on Safari and/or Firefox.

One fix that always works for me in these cases is adding the following custom CSS to the class of the direct parent element of the text.

.parent-div{display: contents}

Troubles with Custom Code

In the case that your custom code snippet is not working, try checking the following:

• Class names - although Webflow will let you have capital letters and spaces in class names, it is not allowed in custom code CSS. Every capital letter in Webflow needs to be lowercase in custom code. Similarly, all spaces need to be replaced with a '-' dash. Example: Class name 'Div block 3' will be written like so: 'div-block-3'
• Style tags - make sure that all of your code is wrapped in <style> tags
• Dot in front of class name - when writing custom CSS, the first part is the selector that the styles inside the curly brackets will be applied to. There are different types of selectors, and in a case of classes, it is a '.' dot.

Webflow project link here

With all of that said, I believe you are now well equipped to create any design with vertical text in Webflow.

Happy (almost) no-coding!

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Suggested articles

25 Ways your website can make more money 🤑

Get ready to boost your earnings with our handy cheat book! Inside, you'll discover 25 sneaky ways to increase your website's revenue. Tried and true methods only, enter your details below:

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.