Unit system

The template editor defaults to using a relative unit system when expressing positions and sizes, such as 50% width or 10 vmin font size. This allows for making responsive templates that automatically adapt to different resolutions and aspect ratios.

Pixels (px)

The px unit represents an absolute size in screen pixels. Due to the fact that it doesn't scale with the resolution of the template, it should be avoided for responsive templates.

Percentage (%)

The % unit represents a percentage in relation to the element's composition. For example, a width of 50% means that the element is half as wide as its composition.

Viewport width (vw)

The vw unit represents a percentage in relation to the template's width. It is useful if you want to size an element according to the total template resolution, rather than the dimensions of the composition in which it is used.

Viewport height (vh)

The vh is the same as the above Viewport Width, but instead uses the template's height.

Viewport minimum (vmin)

The vmin unit represents a percentage based on the smallest side of the template. Therefore, if the template's width is smaller than its height, that value is used, otherwise the height.

Viewport maximum (vmax)

The vmax unit works like Viewport Minimum, but uses the larger side of the template instead.

Previous page
Element properties
Next page