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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-global-vw-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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