Minimum & Maximum Size

Minimum Size

The "Minimum Size" option allows users to define the minimum allowable dimensions for an element. This includes:

• Minimum Width: Sets the smallest width the element can shrink to, preventing it from becoming narrower than the specified value, regardless of screen size or content.

• Minimum Height: Sets the smallest height the element can shrink to, ensuring the element maintains a minimum vertical space.

These constraints help preserve layout integrity and readability across different devices and screen sizes. Users can typically select units like pixels (px), rem, percentages (%), or viewport units (vw/vh) to define responsive and adaptive designs.

Minimum Width

• The min-width CSS property specifies the minimum width of an element.

• It prevents the element from becoming narrower than the specified value.

• This property enhances readability and layout stability on responsive web designs.

• min-width accepts various units like pixels (px), percentages (%), root-em (rem), viewport width (vw), and viewport height (vh).

• Special values include auto (calculated by the browser) and unset (resets to inherit or none).

The heading widget has a minimum width set to 500px. As a result, even when the screen size is smaller than 500px, the widget maintains its minimum width and does not adapt to the smaller screen dimensions.

Minimum Height

• The min-height CSS property specifies the minimum height of an element.

• It ensures that the element's height does not fall below the specified value.

• This property enhances readability and layout stability on responsive web designs.

• min-height accepts various units like pixels (px), percentages (%), root-em (rem), viewport width (vw), and viewport height (vh).

• Special values include auto (calculated by the browser) and unset (resets to inherit or none).

Maximum Size

The "Maximum Size" option allows users to define the maximum allowable dimensions for an element. This includes:

• Maximum Width: Sets the largest width the element can expand to, preventing it from becoming wider than the specified value, regardless of screen size or content.

• Maximum Height: Sets the largest height the element can expand to, ensuring the element does not exceed a defined vertical space.

These constraints help maintain layout balance and prevent elements from overwhelming the design on larger screens or with dynamic content. Users can typically select units like pixels (px), rem, percentages (%), or viewport units (vw/vh) to create responsive and adaptive designs.

Maximum Width

• The max-width CSS property specifies the maximum width of an element.

• It prevents the element from becoming wider than the specified value.

• This property helps maintain layout consistency and prevents content from stretching excessively on larger screens.

• max-width accepts various units like pixels (px), percentages (%), root-em (rem), viewport width (vw), and viewport height (vh).

• Special values include auto (calculated by the browser) and unset (resets to inherit or none).

Maximum Height

• The max-height CSS property specifies the maximum height of an element.

• It ensures that the element's height does not fall below the specified value.

• This property enhances readability and layout stability on responsive web designs.

• min-height accepts various units like pixels (px), percentages (%), root-em (rem), viewport width (vw), and viewport height (vh).

• Special values include auto (calculated by the browser) and unset (resets to inherit or none).

Possible Values

Conditional Values

What are conditional values?

These properties can also be configured using conditional values by expanding the formula editor.

For Example:

• Set the minimum width to 250px on mobile screen, otherwise 500px.

IF(GETCURRENTDEVICE(Phone), "250px", "500px")

• Add two numbers (20 and 40), then append "px" to the result. The output "60px" sets the Minimum Width with the correct unit.

SUM(20, 40)&"px"