Size
Specify the sizing of an element, frame, or section by using values like pixel, percentage, or auto-size.
When building a responsive layout, your size values and sizing tools will help to reduce the number of adjustments needed in the final product.
In this lesson:
  • Size values (pixels, percentages, and auto-sizing)
  • Minimum height
  • Overflow or Clip Content
  • Resize Tools
  • Aspect Ratio

Size Values

Inside the Design Editor, you can define the sizing of any element, frame, or section by pixels (px), percentages (%), or automatic sizing (auto-size).

Pixels (px)

Pixels px are a fixed or absolute value and are used when you do not need the sizing to be relative to a parent container.

Percentages (%)

Percentages % are a relative value meaning they transform and scale based on their parent container.
For example, if you set a section to be 100% height, this means it will be relative to the browser viewport and therefore give a fullscreen immersive effect.

Automatic Sizing (auto-size)

By specifying elements to be auto height or width, the element will automatically size based on what’s inside of them.
This enables you to build responsive designs and components, faster.
Auto size can be used in two ways:
  1. 1.
    Specifying the min-height as auto: This will allow the height of the section, frame, or element to grow as you add more content.
  2. 2.
    Specifying the width as auto: This will adjust the width of the frame or element depending on the amount of content

Minimum Height

Minimum height has become the singular value for height within the Design Editor
We’ve introduced a singular value minimum height to assign a height value to elements on your canvas. By specifying minimum height, your content will look great across any breakpoint and not be clipped as audiences adjust their browsers.
Ultimately, we’ve found by assigning one value instead of two (height and minimum height) results in better control and less work to make your designs responsive.

Clip Content (also known as overflow)

By check-marking the box for clip content in your section or frame in the Style Panel, elements that are partly outside the boundaries will be ‘clipped’ or hidden.
This will effectively add the CSS property of overflow: hidden to those elements and render them invisible to audiences.

Resize Tools

The resize tools are shortcuts to ease the process of readjusting elements, so you can make sure that your elements are fit snug to their parent containers or aspect ratio.
Resize Tool
Description
Resize Horizontally
This will resize an element’s width to its parent container.
For example, if you resize horizontally an image inside of a section, that image will resize to be 100% width of the section (which is the parent container)
Resize Vertically
This will resize an element’s height to its parent container.
Resize to Fit
This will resize an element to its contents or specified aspect ratio (if image or video)

Aspect Ratio

Specifying and locking the aspect ratio of an element like an image or video will allow you to adjust and resize the element but still maintain the overall relationship between height and width.
Pro Tip: Right-click the aspect lock to open up a menu of popular aspect ratios
For example, to avoid getting the dreaded black bars on the top and bottom of your Youtube Video embeds you can:
  1. 1.
    Set a 16:9 aspect ratio size to the Youtube embed, in this case, 1280x720
  2. 2.
    Lock the size/aspect ratio in the Style Panel in order to maintain that relationship as you resize
  3. 3.
    Resize the Youtube embed to be smaller and then position it on your canvas
Last modified 5mo ago