Cornerstone and Live Preview are not matching

[durachase]

Hello,

I am having issues with my live preview matching cornerstone. Everything looks great in cornerstone, but when I look at the live site, I am having font size, element, and formatting issues.

[Prasant]

Hello @durachase,

Thanks for writing in!

As you are facing variance in the Cornerstone Preview and Live website, please try out following solutions and let us know the outcome:

1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
2. Go to X > Settings and click on the Clear Style Cache button.
3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
4. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
5. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

[durachase]

I am still experiencing the same issue on my residential and commercial pages

[durachase]

Information

[nabeel]

Hey @durachase,

Thank you for providing the credentials. I see you’re using WP Engine which aggressively caches everything so this might be causing the issue. Please go to WP Dashboard > WP Engine > General Settings and Purge All Caches (see screenshot)

After purging the cache then check your pages again. Let us know how this goes!

[durachase]

Hello,

I purged all caches and it did not fix the issue.

Cornerstone and live preview are still not the same.

[ruenel]

Hello @durachase,

I have logged in and inspected your site. I found out several incorrect codes in the custom css:

.x-btn.x-btn-alt,.button.x-btn-alt,[type=\"submit\"].x-btn-alt{
    border-color:#02aed6;
    background-color:#02aed6;
    box-shadow:0 0.25em 0 0 #0b8ead,0 4px 9px rgba(0,0,0,0.75);
}
.x-btn.x-btn-alt:hover,.button.x-btn-alt:hover,[type=\"submit\"].x-btn-alt:hover{
    border-color:#0b8ead;
    background-color:#0b8ead;
    box-shadow:0 0.25em 0 0 #097690,0 4px 9px rgba(0,0,0,0.75);
}

The correct one should be:

.x-btn.x-btn-alt,.button.x-btn-alt,[type="submit"].x-btn-alt{
    border-color:#02aed6;
    background-color:#02aed6;
    box-shadow:0 0.25em 0 0 #0b8ead,0 4px 9px rgba(0,0,0,0.75);
}
.x-btn.x-btn-alt:hover,.button.x-btn-alt:hover,[type="submit"].x-btn-alt:hover{
    border-color:#0b8ead;
    background-color:#0b8ead;
    box-shadow:0 0.25em 0 0 #097690,0 4px 9px rgba(0,0,0,0.75);
}

And there is an unclosed or unfinished code at the end:

.x-btn-navbar.collapsed{
    color:#808080

I also noticed that you added this code in Appearance > Customizer > Additional CSS:

.x-navbar .desktop .x-nav > li.menu-item-969 > a {
padding-top: 25px;
	text-decoration: none !important;
}

.x-navbar .x-btn.x-btn-real {
box-shadow: none;
	color: #fff;
	background-color: #02aed6;
		border-color: #fff;
	text-shadow: none;
}


.x-navbar .x-btn.x-btn-real:hover {
box-shadow: none;
	text-shadow: none;
	border-color: #000;
}
.x-nav-wrap.mobile.collapse .x-btn.x-btn-real {
width: 100%;
}

.x-navbar .x-nav > li.menu-item-969 > a:hover, .x-navbar .x-nav > li.sfHover > a {
   box-shadow: none !important;
}

.x-colophon {
    background-color: #282828 !important;
}

Please understand that this code will just be overwritten because of the hierarchical order of the css styles loaded in the page. This is the order:

• Theme’s stack style css
• Child theme’s style.css
• WordPress Additional CSS (Appearance > Customizer > Additional CSS)
• X Theme option settings
• X Theme option custom css
• Cornerstone’s page custom css

It is advisable that you add your custom css in X > Theme Options > Custom CSS instead.

Hope this helps.

[durachase]

I am experiencing issues on the residential and commercial pages.

On the cornerstone preview, the feature list and the words are formatted correctly.

However, on the live web page, the content shows like this.

How do I fix this issue?

[christian]

Hey @durachase,

Layout issues are usually caused by broken HTML and I see several in your page. Please remove the font tags (recommended) from your content or at-least correctly close them.

Hope that helps.

[durachase]

Thank you! That worked

[Prasant]

You are most welcome.