Text rotated using Transform breaks onto Multiple Lines instead of staying on one?

[andysuffillboyes]

Hi everyone

So in the hero section of this WIP site I’m having issues with the H2 labelled “SPT Lodges”. It’s rotated 90 degrees using transform, but it should remain in a single vertical line, however for some reason it’s breaking into two lines instead.

If I increase the width of the div to 300px instead on 100px it flows back into one line but the positioning gets messed up and it really needs to be 100px anyway.

The issue visually:

How is should look once the design is hopefully completed:

Any help would be greatly appreciated.

Regards
Andy

---

Here is my site Read-Only: https://preview.webflow.com/preview/spt-lodges-nov-21?utm_medium=preview_link&utm_source=designer&utm_content=spt-lodges-nov-21&preview=cb2f6234ceca5142f1f3e7eb6af0e5b4&workflow=preview
(how to share your site Read-Only link)

[chrisnice (Chris Nelson)]

@andysuffillboyes Hello Andy!

I was able to get it to stop breaking.

1. Make your text option “no-wrap”
   

   

2. Make it’s position static(I was able to get it to work without adjusting it’s positioning)
   

   

3. Add a move transform to put it in better positioning.
   

   

Please let me know if this works for you. Thanks!

[andysuffillboyes]

Ah you’re a legend Chris… I’ll give it a try now.

I’d literally just started using svg’s and hidden h2’s in the background for SEO instead… but I’m glad I nearly had it right.

I’ve still got loads of animation to add and two more headers with animated sections after this issue… so fingers crossed

[chrisnice (Chris Nelson)]

@andysuffillboyes No problem Andy. Just spreading the love. If this is your solution could you kindly hit the solution button? It helps out the whole discourse.

Cheers

[andysuffillboyes]

Yeah that’s worked a treat… I’ll have to individually alter each of the other two headers (visible in my screen grab visual above) when I add them, but I think this looks like the perfect solution to the problem… top man.

Cheers

[chrisnice (Chris Nelson)]

@andysuffillboyes You will be adding 2 more headers for a total of 3?

[andysuffillboyes]

I will… so it looks like this…

This will all be animated eventually.

So when you hoover over another of the 90 degree H2 header blocks in Dark Red the following happens:

An active block consists of the H2 Header (dark blue strip), it’s info block (mid blue) and a hero image. will close and then open its own block in a concertina effect… at least that’s what I have planned.

[chrisnice (Chris Nelson)]

@andysuffillboyes sounds like a really cool effect!

Cheers!