I am having problems controlling font-size for mobile and desktop in a Cornerstone site. I have read a lot of related Apex posts, and I do not think I have a clear understanding of the site options for Typography. I am not using CSS in my attempts at control.
The site is http://yale70.com
Hi John,
Please kindly read this article to know how to make use of the Font Manager and assign it to different portions of the website:
For the overall theme generated text, you have the options available for you in X > Theme Options > Typography.
If you use the Cornerstone to add the page, then each element has a separate option to set the font. For example, you can learn more about the Text element here:
Now, for the mobile view you have three options to change the font size:
1- You can use the Responsive text tricks and set the font size in a way that it will be responsive. You can learn about that here.
2- You can hide the element that you used in Cornerstone for mobile and add another element and set the font smaller. Please kindly click here for more information on how to hide elements in various viewports.
3- You need to use custom CSS code to force the smaller font size. (This is customization and outside of our support scope.)
Thank you.
I have arrived at a practical compromise by using “Theme Options” available in Cornerstone, specifically “Root Font Size” specifications. While I understand the concepts of relating font sizing to a root size, I can’t say I understand it in detail. I found a good article in the forum that linked out to a link explaining the arguments for em and % sizing. There are six parameters available in this part of “Theme Options” that I having been noodling, and then testing on my phone and desktop. When the phone looks good, the desktop tends to be too large. If you have any practical guidance on “Root Font Size” parameters (in Cornerstone), I would be grateful.
Thanks for you help.
Hi John,
Here’s your guide for ROOT FONT SIZE:
The root font size and the explanation here is how it is computed. You might need to understand the REM units too.
As a sample check this screencast showing you the font calculation. On the first part was my Root font size settings. Then on the element itself, I have 1 em value, which means 16px based on my root font size LG settings. There was so many em units that might be the possible fallback if it is not set on the element. You can see it become 18px. It is because of the REM units calculation. Knowing this step by step computation of the browser too will help you understand how the font became too large: https://screencast-o-matic.com/watch/cYf36EAXih
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.