Giant text in cornerstone editor

[challenger]

Hi, after updating to the latest X and Cornerstone, I am having an issue in Cornerstone where the preview shows all of the text at a huge size. I saw in another post that Revolution Slider can be a cause but we don’t have that installed. Please help

[prakash_s]

Hello Bobby,

Thanks for writing to us.

It might be the issue of cache or any plugin conflict because of that font styles are overriding by any plugin styles or maybe custom CSS/JS. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1. Testing for Plugin Conflict
2. CSS/JS Customization
3. Version Compatibility
4. Disabling Cache

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[challenger]

I’ve tried the suggestions, to no avail. I’ve included the requested info in a secure note. Thanks

[challenger]

I did some observation and it seems for some reason, in the Cornerstone preview, the erroneous large font size is being set explicitly in the “style” attribute of each preview container element, completely overriding the CSS? Everything is as expected on the live page, this style is only being applied in Cornerstone. If I disable the rule on the element via browser devtools, everything looks normal. Don’t know if that’s useful, just something I found. Thanks

[prakash_s]

Hello Bobby,

Thanks for sharing the credentials, I went ahead and checked your page content font-size. I checked some section and it seems the font-size is rendering correctly as you have set in the element.

For example, I checked your first section headline element, it seems that the font-size is rendering correctly what you have set in the backend.

Please have a look at the backend Headline element font-size screenshot below.

In case if you want to decrease the font-size you can set from the backend with the help of our builder element.

Hope it helps
Thanks

[challenger]

Please observe the other text areas on the page - they are not honoring font-size, and seem to be wrapped in DIVs with manually set font-size that I have no control over. You happened to check the one place on the preview that works.

[ruenel]

Hello Bobby,

You are having this issue because you have added this code in your Topbar content area.

<row><div class="pull-right" style="text-align: right; font-size:12px; color:#fff ;font-weight:normal; padding-right:10px;">1.800.676.0822&nbsp;&nbsp;<a  style="background-color: #0096ff;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 0px 10px 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  font-weight:bold;
  margin: 0px 0px;
  cursor: pointer;" href="https://app.challengercme.com/registration">Start for free</a>&nbsp;&nbsp;<a style="background-color: #ff9600;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 0px 10px 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  font-weight:bold;
  margin: 0px 0px;
  cursor: pointer;" href="https://app.challengercme.com/login">SIGN IN</a></div></row>

You cannot nest a <div> tag inside the topbar content because, on the output, the topbar content is wrapped with a <p> tag. Have you topbar content be updated and use <span> tag instead:

<span><span class="pull-right" style="text-align: right; font-size:12px; color:#fff ;font-weight:normal; padding-right:10px;">1.800.676.0822&nbsp;&nbsp;<a  style="background-color: #0096ff;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 0px 10px 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  font-weight:bold;
  margin: 0px 0px;
  cursor: pointer;" href="https://app.challengercme.com/registration">Start for free</a>&nbsp;&nbsp;<a style="background-color: #ff9600;
  border: none;
  border-radius: 12px;
  color: white;
  padding: 0px 10px 0px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  font-weight:bold;
  margin: 0px 0px;
  cursor: pointer;" href="https://app.challengercme.com/login">SIGN IN</a></span></span>

Kindly let us know how it goes.

[challenger]

I disabled the top bar entirely and it had no effect.

Also, the <p> you’re referring to has its display CSS property set to “none”, which I have no control over. The only way I can make ANY content appear in the topbar is by wrapping it in a <DIV>, even if I put plain text with no markup whatsoever.

[ruenel]

Hello Bobby,

I have duplicated your home page. It seems that something on your homepage is making the text bigger. On my duplicated test page based on your homepage, the texts are displaying normally.

See the secure note.

Kindly check out my test page and compare it to your homepage. A custom CSS may have been embed that works only for the homepage is causing the issue. You may need to check any of the custom CSS you may have inserted in Appearance > Customize > Additional CSS or in your Child theme’s style.css.

Best Regards.

[challenger]

I don’t see any new secure notes.

[tristup]

Hi Bobby,

Previously given credentials are not working to check the Home page once again by logging in. Can you please check once and share the updated credentials.

Thanks