Rotate Text

Hi,

We are unable to transform text to rotate -90 degrees.

We tried using native text block, theme text block and also referenced our CSS Code in additional CSS(native as well as non native) still the text doesn’t transform.

Attachments:

You must be logged in to view attached files.

CSS : .rotate-text {
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: left top;
}

Attachments:

You must be logged in to view attached files.

Hello,

Please paste the below code into the “Global Custom CSS” area in Theme Settings -> Custom CSS for the promo banner title.

.promo-banner .banner-title {
    rotate: 6deg;
    transform: rotate(1deg);
    transform: skewY(0deg) !important;
}

Customize the code as per your need.

Best Regards.

this isn’t working. can you have a look at it?

Hello,

I have visited your site and added the custom css on your site, it is working fine for promo banner titles.
Screenshot for clarification:
https://ibb.co/JnR3hyc

Change the code value as per your need.

Best Regards.

Hi Thanks for the help. we tried doing the same in the block next to the one where you have added the code. The block where we need to work is the “integral Essentials” section which when we add code totally vanishes. refer to the screenshot for the Ui mock up.

Attachments:

You must be logged in to view attached files.

Hi,

1. Visibility of “Integral Essentials” text is not related to the custom code that we provided earlier. Please check the video https://gyazo.com/0028202ac06d765055c51640721bbb6e. Your “Integral Essentials” text is not visible because it added to the banner element that did not have any background image added to it (check the screenshot https://prnt.sc/joXQEJd25ZZU). To fix it, try to first add an image to the banner element.

2. To make your banner title in vertical orientation, first you need to remove all previous code that we provided you earlier. Then add custom class “custom-vertical-title” (https://prnt.sc/Plf9-htJQ0Gk) to the banner in which you want to change title orientation and add the following custom code to the “Global Custom CSS” area in Theme Settings:

.custom-vertical-title .banner-title {
	writing-mode: vertical-lr;
	transform: scale(-1);
}

Kind Regards

understood. however we don’t intend to display an image. all we want is a vertical text and no matter what CSS we try it just doesn’t work.

Request you to understand and help accordingly.
we want text to be shown vertically.

Promo banner element can be used only with background image added to it. Banner element cant be used as title element. For following purposes, you need to use another element called “Section title” (https://prnt.sc/D1EiGB0U05mK). Both “Promo Banner” and “Section title” element doesn’t have option to make it text in vertical orientation. Our theme doesn’t have built in options to change orientation of a text and to make “Section title” text in vertical orientation Custom CSS code is needed. Before we can provide following code, you need to first prepare your layout by doing following changes:

1. Remove your “Promo banner” element (https://prnt.sc/HTH1Ozi9aBr3)
2. Replace it with “Section title” element (https://prnt.sc/D1EiGB0U05mK)
3. Set it content with desired text and change it typography if needed.
4. Add Extra class name “custom-vertical-title” in the corresponding field (https://prnt.sc/VDuJ8PBeDxZE) so we can create custom code only for this particular element, which will not affect other “Section title” elements.

Please let us know that you have made the appropriate changes, and we will prepare the CSS code for you.

Kind Regards

[Author]

Posts