The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!

By default, an element will either span the width of its parent element or take the size of the content within it. You can customize the size of elements in the Style panel.

Here, you can specify the width and height of an element in addition to the overflow settings.

Some or all size settings may be disabled for certain elements such as containers and columns.

Width

Width defines how wide an element is. The default width of most elements is set to auto, which means that the element will take the full width of its parent or shrink to take the size of its content and padding.

Most content inside of an element will generate a width value to fit within its parent element. Text will naturally flow to the next line, however, long words may overflow the element.

You can specify how overflowing content is treated for each element by changing the overflow property setting.

Max W: minimum width

Minimum width, displayed as Min W in the Designer, defines the minimum width of an element. The default value is 0px unless a value is inherited, which will be indicated by an orange label.

Setting a minimum width ensures that the element will never shrink past that value.

Max W: maximum width

Max W defines the maximum width of an element. There is no maximum width by default unless a value is inherited — again, indicated by an orange label.

Setting a maximum width ensures that the element will never grow beyond that value.

Height

Height define how tall an element is. The default height of most elements is set to auto, meaning that the element will grow in height as you add more content or increase the padding within the element.

When you define a height to an element, the content inside may overflow the element when it hits the bottom boundary. You can specify how overflowing content is treated for each element by changing the overflow property setting.

Min H: minimum height

Minimum height, or Min H as it appears in the Designer, defines the minimum height of an element. The default value is 0px unless a value is inherited.

Setting a minimum height ensures that the element will never get shorter than that value.

Max H: maximum height

Defines the maximum height of an element. There will be no maximum height set by default. Setting a maximum height will ensure that the element will never exceed the height of that value.

When you set a maximum value, you may want to change the overflow property setting to ensure that no content will overflow your element.

Size values

The default value for width and height is auto, allowing the element and the content inside of that element to accommodate the design more fluidly. Size values can be defined in absolute terms using pixel values or relative terms using ems, rems, percentages(%), or viewport-width(vw).

Learn all about input values and units.

Overflow

Overflow specifies whether the overflowing content within a parent element will be visible or hidden. Overflow also specifies if and when scrollbars are added to the element to access overflowing content.

Visible

By default, element overflow is set to visible. This means that any content that exceeds the boundary of that element is visible.  

Hidden

To hide overflowing content so that it doesn’t overlap with other content, set the overflow to hidden.

This setting is helpful when running into issues of horizontal scrolling on your live site. There may be an element that’s pushing the content of the website outside of the viewport, activating a horizontal scrollbar in the browser.

Scroll

You can choose to hide the content so that it doesn’t interfere with other content on the page, but make it accessible through scrollbars by setting the overflow to scroll. This option will display a scrollbar even when there’s no overflowing content. On some operating systems, scrollbars may be hidden by default.

Auto

Alternatively, you can choose to only display a scrollbar when content overflows by setting the overflow to auto.