Use the Sizing section to control the width, height, and overflow of your element.

Set Element Sizing

1. Select the element on the page.

2. Go to Right Panel → Sizing.

3. Set a value in the Width and Height fields. You can also click on the unit next to each field to access more unit options and modes.

💡 Tip: You can also adjust width and height by dragging any of the element’s side handles.

Lock Aspect Ratio

By default, they’re unlinked, but you can lock the aspect ratio, i.e., link width and height, of your element by clicking the icon next to the Width and Height fields. 

When enabled, changing one dimension will automatically update the other to maintain the same proportions.

Sizing Units & Modes

Both Width and Height support the following units:

• PX – Fixed pixel value.

• REM – Relative to the root element’s font size.

• % – Relative to the parent container’s size.

• VH – Relative to 1% of the viewport’s height.

• VW – Relative to 1% of the viewport’s width.

In addition to units, you can also set Width and Height to a sizing mode:

• Auto – The element will occupy the size of its container.

• Fit contents – The element shrinks to wrap around its content.

• Min content – The element sizes itself to the smallest possible size based on its content.

• Apply Variable – Alternatively, you can bind a width or height to a global style attribute known as a Variable. Learn more about Variables.

• Apply Function – Instead of defining an exact value, you can also define a function to calculate the width or height. Learn more about Functions.

Minimum Sizing

Define the minimum width and height of the element. Here’s how this property affects the appearance of an element:

• Width – If the element width is smaller than the minimum width, the minimum width will be applied. If the content is larger, this property is ignored, preventing the width from falling below the defined minimum.

• Height – If the element height is smaller than the minimum height, the minimum height will be applied. If the content is larger, this property is ignored, preventing the height from falling below the defined minimum.

Set Minimum Sizing

1. Select the element on the page.

2. Go to Right Panel → Sizing.

3. Set a value in the Min Width and Min Height fields. Click on the unit next to each field to access more unit options and modes.

Set Maximum Sizing

Define the maximum width and height of the element. Here’s how this property affects the appearance of an element:

• Width – If the element width is larger than the maximum width, the maximum width will be applied. If the content is smaller, this property is ignored, preventing the width from becoming larger than the defined maximum.

• Height – If the element width is larger than the maximum width, the maximum width will be applied. If the content is smaller, this property is ignored, preventing the width from becoming larger than the defined maximum.

Set Maximum Sizing

1. Select the element on the page.

2. Go to Right Panel → Sizing.

3. Set a value in the Max Width and Max Height fields. Click on the unit next to each field to access more unit options and modes.

📝 Note: Minimum and maximum width and height can override a defined width or height. However, if the minimum is larger than the maximum, the minimum always takes precedence.

Control Overflow

By default, the Overflow of an element is set to Visible, meaning it is not clipped and can extend outside the element’s box. You can change this behavior by selecting one of the following options:

• Visible – Overflow is not clipped, and content extends outside the element’s box.

• Hidden – Overflow is clipped, and the clipped portion of the content is not visible.

• Scroll – Overflow is clipped, but a scroll bar is added to view the clipped content.

• Auto – If overflow is clipped, a scroll bar is added for the remaining content.

Keep in mind that this property only works for elements with a specified height.