Understanding widget sizing

By default most storied widgets and containers are sized based on a percentage of their parent's size. This allows users to easily create responsive layouts and content without the need to understand more complex sizing concepts.

For situations requiring more flexible sizing options however users can change the sizing units of widget dimensions to best match their needs.

1. Select the widget for which you want to define the dimensions then expand the 'Properties' tool.

Clicking the unit indicator below the dimension fields will reveal available unit choices for the selected dimension:

  • px: a static pixel dimension.
  • %: percent of the parent element.
  • vw: percentage of the viewport width
  • vh: percentage of the viewport height
  • vmin: percentage of viewport's smallest dimension

    * Viewport = the browser window size. If the viewport is 1000px wide, 1vw = 10px.

Note: A common use-case in webdesign is using a % width for a widget but also limiting it to a certain px width using max-width. This ensures that the widget will always be a certain % on devices, but on wide desktops it will still be limited to a certain pixel width.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us