When building with responsive design in mind, your size units and sizing tools help reduce adjustments needed for different breakpoints and device modes.

Change the value by clicking on one of the size fields and a dropdown list with the options will reveal. Here you can define and control the size of elements with the following CSS units:

The CSS units decide how the element should resize depending on different factors, such as the screen size or the frame content. Select the one that best accommodates your sizing needs.

Pixels are a fixed or absolute value used when you need to specify an exact size that will not change unless you make adjustments. For example, if you set an image height to 250px it will always keep a height of 250 pixels.

Percentages are a relative value, meaning their size is defined by the parent container size. For example, if you set an image to be 50% width in a frame, the image will always cover half the width of the parent container (the frame in this case).

Use automatic size when you want the frame to grow or shrink according to contents added or removed. For example, if you set a text frame to auto height, the height of the frame will grow or shrink to contain the text you add or remove.

Viewport sizes represent a percentage of the viewport's width and height. In Vev, the viewport is the same as the canvas, which refers to the dimensions of the visible area in a web browser. There are two types of viewport sizes:

Note: Percentage (%) units sound similar to viewport sizes, but the main difference is what they relate to. Percentage relates to its parent container, while viewport units relate to the viewport, not the parent container or frame.

You can use viewport size units when you for example want to:

One of the challenges of designing for the web is ensuring that elements look great across all screen sizes. The min and max size properties give you control over how small or large elements can be, helping you maintain consistency and flexibility in your designs. You can easily add min and max sizing by selecting them from the size field dropdown.

The min width property ensures that an element doesn't shrink below a specific width, while the max width prevents it from growing too large.

Example

Imagine designing a card component. You want it to expand to fill space on larger screens but stay readable on smaller ones.

The card will then resize fluidly between the minimum and maximum width, ensuring it doesn't become too narrow or too wide.

The min height property ensures that an element doesn't shrink vertically below a certain point, while max height prevents it from growing too tall.

Example

Imagine designing a hero banner for a website. You want it to take up a good amount of vertical space on bigger screens, while on smaller screens, it shouldn't shrink so much that the content becomes cramped.

This will ensure the banner resizes fluidly between the minimum and maximum height, preventing it from becoming too low or too tall.

The resize tools are buttons to quickly resize elements to fit parent containers, aspect ratio, or nested contents.

Specifying and locking the aspect ratio of an element, like an image or video, ensures that you can resize it freely while keeping the proportions between height and width intact.

Example

To avoid the black bars that can appear above and below your YouTube video embeds, follow these steps: