CSS: “--global-vw”: The types are incompatible.

The value of the --global-vw custom property has a math expression that combines values of incompatible types.

The Kadence WordPress theme sets this variable on .wp-site-blocks to the viewport width minus half the scrollbar width: calc(100vw - (0.5 * var(--scrollbar-offset))). A theme script measures the scrollbar and stores its width in pixels in --scrollbar-offset. Full-width rows built with Kadence Blocks read var(--global-vw, 100vw) to extend past the content column.

A custom property can hold almost any value, so the validator doesn't check whether the result is a length. It does check the math inside calc(), min(), max() and clamp(), where the values you add or subtract must have the same type. Subtracting a unitless number from a length, as in calc(100vw - (0.5 * 15)), triggers this error. Browsers reject that expression too. Every property that reads the variable becomes invalid at computed-value time and acts as if it were unset. The 100vw fallback in var(--global-vw, 100vw) doesn't apply, because the variable is defined.

The value Kadence writes by default passes the check, because the validator doesn't type-check an expression that contains var(). If your page shows this error, something else on the site has replaced the theme's value. Look for custom CSS or a child theme that redefines --global-vw, and add the missing unit to the number.

Invalid example

<style>
  .wp-site-blocks {
    --global-vw: calc(100vw - (0.5 * 15));
  }
</style>

Valid example

<style>
  .wp-site-blocks {
    --global-vw: calc(100vw - (0.5 * 15px));
  }
</style>

Learn more:

MDN Reference

MDN Web Docs: Custom properties (--*)

→

MDN Reference

MDN Web Docs: calc()

→

wordpress.org

Kadence theme on WordPress.org

→