Flip heading vertical, no break and stay in place!

  • Resolved hebhansen

    (@hebhansen)


    7 months, 3 weeks ago

    Hey TT4

    I am using the RSVP pattern as a generic hero theme of my TT4 site with some css effects added to it.

    I am adding the RSVP to my store and using “Archive Title” block as heading instead of the native heading for a dynamic transition of text/descriptor.

    The heading block has a flip 90 deg function and the Archive Title does not. So I added a css class to the block and threw a few lines in my child theme.

    /******** Rotate Text - Rotated Headings ********/
.rotate-counter-clock-90 {
    transform: rotate(-90deg);
	/*white-space: nowrap;*/
}

    That works nicely but the title/heading is all over the place:

    1. The title breaks the word for some reason I do not understand instead of just extending the height of the block. Left column is a Stack block set to horizontal.
    2. Adding the white-space nowrap to my css does the trick of keeping things in one line, but now the heading goes on vacation all over the page. A shorter word goes here, and a longer word goes here.

    I tried adjusting spacing, left center right align, top bottom align etc. I am confused. Here is a backend view.

    Any help is appreciated. Thx

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator jordesign

    (@jordesign)

    Hey @hebhansen – I’ll be honest, I don’t really know the answer to this one, as I haven’t played with that vertical text much.

    One thing I can suggest is, if you insert the RSVP pattern, see what other CSS is applied to that heading to help keep it in shape?

    The title breaks the word for some reason I do not understand instead of just extending the height of the block. Left column is a Stack block set to horizontal.

    @hebhansen Transform rotate(deg) alone isn’t sufficient. Can you try the following.

    transform: rotate(180deg);
writing-mode: vertical-rl;
    Thread Starter hebhansen

    (@hebhansen)

    @madhu

    Wow … How you came up with that, I have no idea, but that fixed it. Wow again …..

    Just wondering. Is there a way to limit the length of the text string. If fx.it’s very long, can I force a line break at a certain length and how?

    • This reply was modified 7 months, 2 weeks ago by hebhansen.
    Thread Starter hebhansen

    (@hebhansen)

    @madhudollu

    I am back. I am using this flip on single product template for woo. Titles of products vary, hence they can really stretch long, so a line break is accepted. However, even after line break it leaves a blank space after title, and that’s not paricularly practical.

    I messed with white-space: nowrap; but then line gets very long with long titles. How can I get rid of the excess space?

    • This reply was modified 7 months, 2 weeks ago by hebhansen.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Flip heading vertical, no break and stay in place!’ is closed to new replies.