Rotate title that's upside down


(Koen Vits) #1

Hi! I have a website using the Nick Cates ‘N Spire’ theme (www.4beauforte.be). Unfortunately, the site title is upside down. Is there a way to rotate it so it is the right way up?
Thank you!


(Indrid Cold) #2

No idea how that has happened and don’t own the theme, but you could try putting this CSS in the global CSS container:

header h1 {
    writing-mode: unset !important;
}

That selector/value is currently set to ‘tb-rl’ which seems to be causing the issue.

Presumably you have checked the theme options? Is there any other custom CSS which might be responsible?


(Koen Vits) #3

Thank you! Now the text is rotated 90º and readable, but is there a way to rotate it more so it is facing the website instead of the other way around?


(Indrid Cold) #4

Well yes… its a bit out of whack with the original theme design but I suppose…
Remove the previous CSS snippet and replace with:

header h1 {
    writing-mode: tb-rl;
    transform: rotate(180deg);
    margin-top: 0.25em;
}

If you run into any render issues with specific webclients take a look here to get more finely grained CSS for whichever client is bugging:

Hope this helps you get the look/effect you really want.