Reduce text size of the whole site only for mobile with the PRO user interface

[educainventions]

Hi!

So far we have been adapting the font sizes for header, body, etc. depending of the page, type of page… The site looks quite good in desktop, but in mobile, texts are something too big or too small.

PRO has been improved a lot since those CSS modifications. So I hope you have a global way to choose those values on the graphical interface of PRO.

If that configuration menu exists, I have not been able to find it so far: could you help me to find it? If not? What way do you recommend me to modify all the text sizes of the site in mobile?

Thanks so much, you have been an awesome team so far

Carlos

PS: our website is edinventa.com (the landing font sizes are quite well corrected for mobile, so you better see other pages like: http://edinventa.com/virtual-reality)

[Prasant]

Hello @educainventions,

Thanks for asking.

You can change the font sizes for each breakpoints from Pro > Theme Options > Typography > Root Font size.

For more information in differences in between Stepped and Scaling, please take a look at following changelog post:

https://theme.co/changelog/#theme-x-5-1-0

Thanks.

[educainventions]

Thanks, the explanation of the changelog is too technical: do you have a more clear and less “perfect” explanation?

Thanks so much

Carlos

[thai]

Hi There,

Please check this video, how to use responsive text for headings.

Hope it helps

[educainventions]

Hi. I already have responsive texts is some sections of the website, but it’s hard to maintain with so many pages: the result is wrong font sizes in several pages. In addition, pages edited with the built-in editor of WordPress (like blog pages) looks horrible.

So your support colleague seems answer seems oriented better. The solution is probably changing values in Pro > Theme Options > Typography > Root Font size.

But I don’t understand the difference between Stepped and Scaling from the official doc

[Alaa]

Hi @educainventions

The difference between stepped and scaling is the way the font is displaying between different screen sizes, check this example for a screen size between 400px - 800px assuming that you set “FONT SIZE (SM)” to “14px” and “FONT SIZE (LG)” to “22px”

• Scaling will do a smooth transition in font size between “22px” to “14px” when the screen is resized between 800px to 400px.

• Stepping will change the font size immediately once the screen size is changed to the breakpoint at 800px and 400px.

I hope this clarify everything,

Thanks.

[educainventions]

So both are related to Javascript responsive system integrated into Pro?

In other words: once those values are changed, the whole site changes their font size? Or only if a specific section has in the class field a “responsive text” added?

And in other words: I don’t like Javascript, it fails sometimes. Is there a way to do it with CSS for the whole site? CSS seems mucho more stable for me…

Thanks so much for your clarifications and patience!

Carlos

[rad]

Hi @educainventions,

If you’re referring to responsive text from here

Then yes, it’s a javascript, but if you’re referring to Pro > Theme Options > Typography > Root Font size., it’s CSS based, the example generated CSS is this

@media (min-width: 500px)
html {
    font-size: calc(14px + (14 - 14) * ((100vw - 500px) / (1000 - 500)));
}

The root font size is calculated to the breakpoint of greater than 500px. Based on the scaling setting of this

Thanks!

[educainventions]

Very very clear now. Thanks so much por your clear explanation and posting the css code!!!

One last question, according with your PERSONAL opinion, which one do you recommend me? Stepped or scaling?

Thanks so much

Carlos

[rad]

Hi @educainventions,

I would use stepped configuration as I can define font size for each device. Then in local elements, like in the builder, I would use REM instead of PX unit so it would respond to the root font size.

Thanks!