Why Cornerstone (Pro) elements show up differently in editor and front end view?

Support
#1

I’ve been having a couple issues pretty consistently with Cornerstone/Pro page builder. I had hoped that the new update would fix them, but had no such luck.

What happens is I often will set up elements so that they have certain visual characteristics in the page builder, and while the preview on the backend looks great, as soon as I load up the actual page, many of those characteristics are ignored or don’t show up properly. A couple examples: I’ll add a “button” element, make the background blue and the text white, and it looks exactly the way that I want in the builder preview. But then when I load the actual page the button background color is ignored, even though the text color will remain the same. Another example is I’ve set up some columns on the main page to have a white background and drop shadow, but when I load the page’s front end, the columns all have transparent backgrounds and no shadow.

Any ideas on why this continues to happen? There are other issues I’ve had with Cornerstone as well, such as rows overlapping other rows suddenly without me making any changes, and try as I might I can’t get them back to the way they were, or columns will wrap in the back end when really in the front end they’re side by side like they’re supposed to be. I’d prefer to use a builder such as Elementor, but there are integrations with Cornerstone that would make building the site much easier if it worked as intended.

I might just be missing something, but if that’s the case I could use some help pinning down what that is. I’ll provide login info in case that’s helpful. The two issues I referenced earlier are on the home page, under the “Testimonials” section (the column backgrounds showing as transparent), and the “Team Members” page (the issue with the buttons).

Thanks in advance.

#2

Hello Cameron,

Thanks for writing in! This was a known issue in the previous release version. We already release a patch for this. Pro 2.3.5 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#3

Thanks for the suggestion, but unfortunately I’m still having the same issue even after updating. I’ve left the “Testimonials” area of the front page as an example of one of the issues. I have a 3 column row, and I want the 3 columns to have a white background with a border radius of 25 px. Currently 2 of the 3 columns are showing up the way I want them to, but the 3rd doesn’t show any border radius at all, even though in the backend it’s set at 24 px. As soon as I set it to 25 px to match the other two columns all column styling disappears, including the background color, the box shadow, and the border radius.

This is all after ensuring that all caches are cleared.

#4

Hello Cameron,

Thanks for updating the thread.

We have released a new bug fix update Pro version 2.3.6. I request you to please update to version 2.3.6 and see how it goes. After updating, please make sure to clear cache.

https://theme.co/changelog/

Thanks.

#5

Sorry, I should have clarified. The version that I updated to was 2.3.6, and the issues still persist.

#6

Hi Cameron,

May I know more details of the issue you’re getting? Like a sample page where this happens, and which elements are affected on that page. I checked and the only thing I’m seeing missing in the preview are the sliders compared to the actual page. And the sliders preview are now unavailable to builder’s preview (except masthead sliders) due to possible conflicts.

Thanks!

#7

No problem. The biggest issue right now is on the main page, under the “Testimonials” section. I’ve had similar issues elsewhere but maybe this instance will help contribute to a solution.

The above image is how I want this part of the site to look. On the backend (in the Pro content editor) it shows up just fine.

However when I load it up in an actual browser (I’ve tested multiple browsers and ensured that the cache is cleared) it ends up actually looking like this:

You’ll notice that the background color doesn’t show up, there’s no shadow, and the padding has disappeared.

Like I mentioned, I’ve had similar issues several times while working on the site, working with both column backgrounds as well as button backgrounds.

#8

Hi There,

This text breaks all the theme CSS:

*/Style Notes -

Did you remember where to place this text? I couldn’t see it under Theme Options > CSS or Cornerstone > CSS.

Regards!

#9

Hmmm I haven’t added any custom CSS like that. The only CSS I’ve added has been in the Theme Options > CSS and a little bit in the custom footer. So I’m not sure where that is or where it came from.

#10

Hi There,

I’ve found that text under the Element CSS of text element contains the social icons when I edited your footer:

http://rooftopsupport.com/pro/#/footers/379/inspector

The correct note should be:

/* Style Notes -
	position:relative;
  border:1px solid #ac1100;
  border-radius:0;
  padding:0.563em 1.125em 0.813em;
  cursor:pointer;
  font-size:16px;
  font-weight:inherit;
  line-height:1.3;
  text-align:center;
  vertical-align:middle;
  color:#fff;
  background-color:#ff2a13;
  transition:all 0.15s linear
*/

Instead of this:

Cheers!

#11

Wow, I feel stupid, I had completely forgotten that I had those notes in there, and didn’t realize that I had a typo in the comment syntax. Thanks for helping me pin that down, you guys are life savers!

#12

You are most welcome. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.