Cornerstone Previewer showing fonts way too large

[katie_s_mills]

Hi there,

After latest Cornerstone & X theme update, the preview in Cornerstone on the right is not reflecting the published page. The fonts are loading way too large in instances where I have applied a custom CSS class to a custom headline element.

Another issue is that when I have applied a border-bottom style to an element, cornerstone is showing a double bottom border.

I read somewhere that since the latest update was so extensive, that I would need to flush the cache of the site and my browser - but that hasn’t acheived anything on my end.

I have also checked for plugin conflicts and JS errors - problem still persists.

I am including login credentials below and details of the elements in question.

[ruenel]

Hello @katie_s_mills,

Thanks for writing in!

Please have your code updated and change the font size. It is best that you use fixed pixel like 55px for the font size.

.header-text {
  text-transform: uppercase;
  font-size: 350%;
  line-height: 55px;
  border-bottom: 3px solid white;
  padding-bottom: 15px;
}

To have a better understanding of how the font size units display the actual font size, please check this out:
https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
https://websemantics.uk/tools/convert-pixel-point-em-rem-percent/

Hope this helps.

[katie_s_mills]

Hi - thanks for the reply. My thought in using % was that it would scale with the body copy that gets is stepped responsive. How can I achieve the same without %age?

Also, could you please advise on the double border-bottom that is appearing only in the Cornerstone preview? Thanks!

[friech]

Hi Katie,

Yes, you’re right % is responsive, but on this case, your font-size: 350%; is being applied twice when you’re on the builder.

It could be a plugin conflict or an issue with a caching, like Ruenel’s advise above, you can use a static font-size: 56px; instead.

Cheers!