Hero Headline Calc not Working

I used the dimensions from the Design Cloud 23 header + Hero. I created a template for the hero. When placing the hero template on other pages the equation calc(2.25vw + 32px) is not working. I read some of the other threads and even added the ; after the equation. Still not working.

It appears to work correctly in Cornerstone, however, when previewing the page, not.

Hello @MtnStreamGroup,

Thanks for writing to us.

It seems that you have added invalid "Font Size " value in “Headline” element.
Please have a look at the given screenshot below.

You need to add calc(2.25vw + 32px) like this.
Please check the screenshot below

Please have a look the screenshot so that you can insert Font-size value in a correct format.
Add Font-size here like this calc(2.25vw + 32px) like this.

heaD3

Thanks

Just to verify I am using the latest versions of PRO and Cornerstone.

That is quite odd. All I did was take the 23 header from the DesignCloud and saved the “Hero” as a template. I didn’t change any settings.

I just did a test of cloning the page the homepage where the hero was working correctly. And, the clone worked appropriately. Why would making a template of the ‘Hero’ and installing into a page cause this issue?

In completing the test I did a Save Template of the cloned homepage capturing just the Hero. When I put that new saved Hero, it did the same thing all over again. The font looks correct in Cornerstone, but it is not working correctly on the actual page.

This is really insane. I created a blank page. I placed both hero templates on the page. One worked the other didn’t. One hero template was created from the home page originally. The other hero template was from the clone of the home page.

The one that worked is the same hero template that hasn’t worked.

I did another series of tests. By itself or another template before the hero section. The hero and headline works correctly. However, installing any template after (below) the hero and the headline text doesn’t work.

It’s not just the 23 hero, but it appears the “calc” equation doesn’t work properly with other DesignCloud elements. One test I did was to include the 23 hero and the ‘Architectural Portfolio’ from the DesignCloud. On the same page. In this case, the calculated headline and subhead on both elements didn’t work.

After this test, I removed the hero template and left the ‘Architectural Portfolio’ template. The ‘calc’ font didn’t work properly. I followed up by removing the breadcrumbs template I had created. The ‘calc’ font didn’t work properly.

I continued my testing by adding a variety of content blocks (templates) from DesignCloud to the hero template. The results are the ‘calc’ headline and subheader aren’t working properly.



This is the divider from the Crafty full site.

There’s one exception to this issue. This is a section from the Crafty site.

I did more testing. I created a page with no container, no header, no footer. I inserted the Architecture Portfolio template from the DesignCloud. This is what happened.

It clearly is not what the headline is supposed to be.

Hey @MtnStreamGroup,

The cause of your issue is the incorrect optimization of your site. It compressed all the CSS and that removes the space between the + and the values like this calc(2.25vw+32px). Because of that, the calc function won’t work. It’s not an issue with our theme.

Please temporarily deactivate ALL website optimization like HTML minification then clear all caches including browser cache and server side caching (contact your web host for this).

If you’re not yet aware, please always do or check your site against the Troubleshooting Steps listed in our Common Issues article here https://theme.co/docs/common-issues

Only if ALL optimizations are disabled and the troubleshooting steps performed, we’ll investigate further. For this case, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

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

Thanks.

I turned off the HTML, CSS and JS minify and rebooted everything and it is working correctly. I apologize for taking up your time.

Hi @MtnStreamGroup,

We are glad that you we’re able to solve your issue.

Thank you.

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