Hi there
Is it possible to automatic scale the text depending on the display size. I have set up some Text as a Title over a colored shape layer. It would be great if this text could be scaled automatic for smaller devices (see attachment)
Thank you very much for your help!
Hello Felix,
Thanks for posting in! I have checked your Contact page and I have noticed that you the classic headline element. In the style field, you added this: color: hsl(0, 0%, 100%);font-size: 4em;. And then in your headline text you have added this as well:
<span><span style="font-size: 16px; letter-spacing: 2px; line-height: 0px">KONTAKT</span><br />
Besichtigung vereinbaren: <a class="phone-number" href="tel:0041443006778">044 300 67 78</a></span>
Please do not use px as a font unit because a pixel will display the same across all the screen sizes. You will need to use em and then in Pro > Theme Options > Typography > Root Font Size, use “Stepped” mode, and then adjust the font size in smaller screens. For more details about the root font-size characteristics, please check out this documentation:
By the way, if you use headline element, you will have more control over the element. You can set the padding, margin, font sizes without adding any css code. You can easily tweak the element properties in the headline element style options. If you don’t see some of style options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode
We would love to know if this has worked for you. Thank you.
Hi Ruenel
Thank you very much for your advice! I will use the headline element in the future.
I have set the Root Font Size Mode to “Scaling” because I want the text to scale dynamically for smaller devices. But for any reason it does not. I have tried to set the font size now to em but then all of my whole website texts get new sizes and I have to set up all new.
Would there be a possibility to control the dynamic size of only this headline with CSS. I already have set up a class for this headline: .text-headder-image
Thank you very much for your help!
Hey Felix,
Yes, that should be expected as the Typography Theme Option is Global.
If you wish to apply responsive text to individual elements, you need to use the element’s Font Size field like shown in the tutorial below. In summary, you need to type calc(1vw + 14px) in the Font Size field. 14px in that sample is like your minimum value.
The technique used is actually called Fluid Typography. It can be combined with our theme’s Responsive (Stepped) and Fluid (Scaling) Typography. You can read more about that subject in the link below.
Hope that helps.
Hey Christian
That is brilliant! Thank you very much! I will study the article and the video, so maybe I can better understand what the code does. But for now I have played a bit around with the values and got a quiet good result with this code in the “Style” field: font-size: calc(1.1vw + 44px); padding-left: 3.5%; top: -2.8em;
Thanks again for your help!
You’re most welcome, Felix.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.