Cornerstone editor bug: displaying very large text

[blanchardjeremy]

Hi there,

I’ve had an issue for over a year that I have been struggling through and hadn’t bother to post yet.

For some reason, a lot of text looks MUCH bigger in the cornerstone editor than on my actual site. This applies to all pages on my site.

One example is this page: https://acecoachtraining.com/coach-training-program/

In cornerstone it looks like this: https://d.pr/i/GZdczm

That is true throughout the editor of this page and all my pages. Most of the text is way too big. It makes editing VERY annoying.

I’ve tried to dig through the CSS to find the source, but I can’t figure it out.

Thanks for your help!

[Prasant]

Hello @blanchardjeremy,

Thanks for writing in!

Looks like you have activated Cloudflare. I tried opening the website but I am getting following error message. If possible please deactivate Cloudflare for the moment so we can take a closer look at the setup and issue you are facing.

Thanks.

[blanchardjeremy]

Hi @Prasant

You must have caught the site as at a bad moment. It appears to be working now everywhere I checked it.

[ruenel]

Hello @blanchardjeremy,

I was able to view your site and inspected the page. There is no responsive text assigned on the page. The font size should be displaying correctly. Would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

[blanchardjeremy]

@RueNel - I’ve added it to the post above. Thank you!

[ruenel]

Hello @blanchardjeremy,

Thanks for updating in! I have logged in and investigated the issue. Font sizes are quite bigger because of this custom css:

.focus-small {font-size: 1.4em;}
.focus-medium {font-size: 1.8em;}
.focus-large {font-size: 2em;}

The font sizes were different because the preview is using 16px as the root font size. In your site, the global root font size (X > Theme Options > Typography > Root Font Size) is set to 13px which is way smaller than the preview. We will inform our developers about this so that they can investigate more about the difference in font size.

Thank you for your understanding.

[blanchardjeremy]

@RueNel

Thanks for looking into this!

In the meantime, is there a workaround? Either by adjusting those focus-small classes or by manually overridiing the root font size in the editor?

Thank you!

[rad]

Hi @blanchardjeremy,

I don’t think this needs a workaround or fix, you’ve been using mixed font size configuration, though maybe I’m wrong since all these are classic and old content. Example, with the same root font size, the content use rem, then you statically use em. Hence it has different sizes for each view.

I went ahead and disabled this CSS on both cornerstone custom CSS and Theme Options CSS.

.focus-small {font-size: 1.4em;}
.focus-medium {font-size: 1.8em;}
.focus-large {font-size: 2em;}

The result is this

Please try rem unit instead to make sure it follows the root font size (eg. root em).

.focus-small {font-size: 1.4rem;}
.focus-medium {font-size: 1.8rem;}
.focus-large {font-size: 2rem;}

Thanks!

[blanchardjeremy]

That did the trick. THANK YOU!

[lely]

You’re always welcome.

Cheers!