Understanding widget sizing
Select the widget for which you want to define the dimensions, then locate the sizing section in the right-side panel.
Clicking the unit indicator below the dimension fields will reveal the 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.
Click the link icon to toggle the aspect ratio lock on or off. This will maintain or release the widget’s aspect ratio during resizing.
A typical scenario is to set a widget’s width in percentage (%) to make it responsive, but also limit its width using max-width in pixels (px). This approach ensures that the widget maintains a percentage width on various devices while being constrained to a maximum pixel width on wider screens.
What are width ,height , min-width , min-height , max-width , max-height ?
Click on the button with six dots to expand the min and max attributes,
The width and height attributes are useful when you need a fixed dimension.
The min-width , min-height , max-width , max-height attributes are useful for creating responsive designs where the element's size adjusts depending on content or screen size, but within defined limits.
width: Specifies the exact width of an element. If the content inside the element is smaller or larger than this width, the element will still be this exact width (unless other factors like padding or margins affect it).
height: Specifies the exact height of an element. Similar to width, the element's height remains fixed regardless of its content.
min-width: Sets the minimum width an element can shrink to. Even if the content inside is smaller or the container is narrower, the element won't become narrower than the specified min-width.
min-height: Sets the minimum height an element can shrink to. The element will maintain at least this height, even if its content is shorter.
max-width: Sets the maximum width an element can grow to. Even if the content inside or the container is wider, the element won't exceed this specified width.
max-height: Sets the maximum height an element can grow to. The element will not exceed this height, even if its content is taller.
