# CSS: “--wp--style--global--content-size”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-wp-style-global-content-size-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 `--wp--style--global--content-size` custom property has a math expression that combines values of incompatible types.

WordPress block themes create this variable from the content width in `theme.json` (`settings.layout.contentSize`), or from the layout width set in the Site Editor. WordPress copies that value into a `<style>` element without changing it, so the validator checks exactly what the theme or the site settings contain.

A custom property can hold almost any value, so the validator doesn't care whether the result is a length. It does check the math inside `calc()`, `min()`, `max()` and `clamp()`: when you add or subtract two values, both must have the same type. Subtracting a unitless number from a length, as in `calc(720px - 40)`, triggers this error. Browsers reject that expression too. Every property that reads the variable through `var()` becomes invalid at computed-value time and behaves as if it were unset, so the content width setting stops working.

The validator also reports this error for a length minus a number multiplied by another variable, such as `calc(100vw - 2 * var(--wp--style--root--padding-left))`. Browsers accept that expression because the padding variable holds a length, but the validator can't see what `var()` contains. Subtracting each padding variable on its own gives the same width when the left and right paddings are equal, and the validator accepts it.

To fix the error, edit `contentSize` in `theme.json` (or the content width in the Site Editor): add the missing unit, or replace the multiplication with separate subtractions.

## A unitless number subtracted from a length

### Invalid example

```html
<style>
  body {
    --wp--style--global--content-size: calc(720px - 40);
  }
</style>
```

### Valid example

```html
<style>
  body {
    --wp--style--global--content-size: calc(720px - 40px);
  }
</style>
```

## A multiplied variable subtracted from a length

### Invalid example

```html
<style>
  body {
    --wp--style--global--content-size: min(calc(100vw - 2 * var(--wp--style--root--padding-left)), 720px);
  }
</style>
```

### Valid example

```html
<style>
  body {
    --wp--style--global--content-size: min(calc(100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)), 720px);
  }
</style>
```