When we resize the screen, the text just disappears because it is outside of the safe area but we don’t see the safe area markers in Editor X.
Can somebody please help?
Thanks.
you can use text scaling
Yes, we have done that. The text disappears off the edge of the screen when we resize the page width.
You can set the max and min font size for every breakpoint. I found that trial and error is the only way to get text scaled correctly.
Assuming you want a 100vh display (entire screen) for your site,
I can recommend you to use vh values instead of percentages.
- Your footer is probably with px min-height so change it to vh value.
- select the section and set its min-height to vh instead of px as well. make sure the calculation of the addition of both values, the footer, and the section gives you the result of 100vh (eg. section is 80 and footer is 20).
- Select the text on the left side and set its width to the width of the section’s min-height.
- If needed, align the text to the left, and\or the top.
- Scale the text font size to fit in one line, you can also set the text alignment to the center (via the edit text option).
Repeat those steps for each breakpoint, make sure the text’s margin values from the left and the top are both set to px.
Hi Eden,
The problem is that there is no way to have vertical text on all sizes. When you click “Tablet” or “Mobile” mode, the text reverts back to horizontal. If you adjust it there, then go back to the “Desktop” mode, it will be horizontal. There doesn’t appear to be a way to have it remain vertical across all modes and we’ve been trying all day. Watching tutorials, asking in forums. Does anybody know if this is possible?
Because you use both text scale and rotate I would export the text as svg. It will be much easier for you.
Yes, I am exporting because I couldn’t find any other way to make it work. Now, the issue is how to activate “Sticky” settings on Tablet and Mobile views…
Works fine on Desktop view but on Tablet and Mobile the sticky setting is not working at all.
Note that Sticky only works when the container containing the element is set to scroll: show.
Another workaround to achieve your desired text is to first set it to a fixed size, dock it to left, align it to center and make sure the margin from left is also px size.
Don’t forget to start from the desktop and to the same process on all the BP under.
Here you have a video that demonstrates the process:
@steviesylva56658 I think all of these issues come from 2 very important, yet elusive, facts about how text rotation works on the web:
- Rotation changes the CSS transform of an element - what that means is that the text’s dimensions actually stay horizontal, while only the rendered graphic is being rotated:
2. your text width is defined in percentages, and since what we’ve discussed in point num 1, the width of the box changes when the screen is smaller, causing the text to wrap:
One solution that will help you a lot is just changing the text width to be fixed, in px, and not percentage, so the screen’s width will not affect it
You will still also have to make sure the text is docked properly, taking into account that the docking is based on the bounding box, like in point number 1.
If this still feels frustrating to you, I suggest doing what was suggested before me and export the text as SVG, this will make it much easier to handle it.
Just make sure to add “alt text” to the image to make sure it is fully accessible to people who can’t see the image and relay in screen readers 
@md60th That is the current setting.
The Sticky only works on Desktop mode.