When building with responsive design in mind, your size values and sizing tools will help to reduce the number of adjustments needed for different breakpoints and device modes.
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. You can select between the different size values by clicking the value (for example: %) this will reveal a dropdown list of the different options.
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. If the element is in a container and set to 100% height it will be the full height of the parent container it sits within.
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. For example, if you are adding more copy to a text element the container will expand based on how many characters are in it.
Auto size can be used in two ways:
Specifying the
min-heightasauto: This will allow the height of the section, frame, or element to grow as you add more content.Specifying the
widthasauto: This will adjust the width of the frame or element depending on the amount of content
Minimum Height
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.
Note: Minimum height has become the singular value for height within the Design Editor.
Overflow and Clip Content
By checking the box for clip content (also known as overflow) for 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 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.
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:
Set a 16:9 aspect ratio size to the Youtube embed, in this case, 1280x720
Lock the size/aspect ratio in the Style Panel in order to maintain that relationship as you resize
Resize the Youtube embed to be smaller and then position it on your canvas
Related Articles