Webflow sync, pageviews & more.
NEW
Answers

Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?

Yes, you can definitely use the CSS code `writing-mode: vertical-rl` to create a vertical heading in Webflow without having to rotate it by 90 degrees.

Webflow allows you to add custom CSS code to your project, giving you the flexibility to achieve specific design effects. Here's how you can add the `writing-mode` property to create a vertical heading in Webflow:

1. Select the heading element you want to make vertical. This can be a `

`, `

`, or any other heading element.
2. Go to the Styles panel on the right-hand side of the Webflow Designer.
3. Click on the "+ Add Custom Code" option, located at the bottom of the Styles panel.
4. In the "Head Code" section, add the following CSS code:

```css

```

Make sure to replace `.vertical-heading` with the class name of your chosen heading element. If you want to target multiple heading elements, you can add multiple class names separated by commas, like this: `.vertical-heading, .another-heading`.

5. Apply the class to your heading element by selecting it and going to the "Selector" field in the Styles panel. Add the class name you specified in the CSS code (e.g., `vertical-heading`).

After adding the custom CSS code and applying the class to your heading element, it should immediately change the text orientation to vertical.

Keep in mind that the `writing-mode` property may not be fully supported in older browsers, so it's always a good idea to test your design across different browsers and devices to ensure consistent results. Additionally, you may need to adjust the width and height of the element and its container to accommodate the vertical layout properly.

I hope this helps! Let me know if you have any more questions.

Rate this answer

Other Webflow Questions