When building with responsive design in mind, your size values and sizing tools in the Design Editor will help to reduce the number of adjustments needed for different breakpoints and device modes.
Size values
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:
Pixels (px)
Percentages (%)
Automatic size (auto)
Viewport size (vw and vh)
The CSS units decide how the element should resize depending on different factors, such as the screen size or the content of the component. Select the one that best accommodates your sizing need. Learn more about how each of these defines the size below.
Pixels (px)
Pixels are a fixed or absolute value and are used when you need to specify an exact size that will not change unless changed by you. For example, if you set an image height to 250px it will always keep a height of 250 pixels.
Percentages (%)
Percentages are a relative value meaning their size is defined by the size of the parent container. 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).
Automatic size (auto)
Use automatic size when you want the container to automatically size according to its content. For example, if you set a text container to be auto height, the height of the container will grow or shrink to contain the text you add or remove.
Viewport size (vw and vh)
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 within a web browser. There are two types of viewport sizes:
Viewport width (vw):
1vwis equal to 1% of the viewport width. For example, if the viewport's width is 1000 pixels, then1vwwould be equivalent to 10 pixels.Viewport height (vh):
1vhunit is equal to 1% of the viewport height. For example, if the viewport's height is 800 pixels, then1vhwould be equal to 8 pixels.
Note: Percentage (%) units can be similar to viewport sizes, and the main difference is what they relate to. Percentage relates to its parent container, while viewport units relate only to the viewport and not a parent container or frame.
You can use viewport size units when you for example want to:
Ensure sizing is proportional to the viewport
Create full-width or full-height components
Make typography responsive
Minimum height in sections
Section height in Vev is specified by minimum height (Min H). This is a CSS property that ensures that the section will not shrink below the defined minimum height, even if the content is smaller.
Minimum height makes it quicker for you to resize your section according to the content you are working with, so you don't have to manually adapt the height to fit its content. You can easily use Min H as a regular height by manually adjusting it, but it can never be smaller than your content.
Note: If you lock the aspect ratio of your section, it will switch to using regular height and the section will keep the defined ratio.
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 snugly 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