The design panel displays on the right side of the screen and contains your design properties for the selected element (section, column, widget, flexbox, or advanced grid). This article reviews the size units used in the design panel and provides examples for when to use each unit.
Each size unit can be set from the main breakpoint (desktop) and they will automatically apply to all other screen sizes. If necessary, you can adjust the size units on tablet and mobile without affecting other breakpoints. To learn more, see DudaFlex Breakpoints.
This article is relevant for both DudaFlex and All-Flex.
%
Percentage (%) is a responsive size unit that defines the percentage of the container (section, column, flexbox, or advanced grid) that the element will scale to occupy on different screen sizes. By default, most flex element widths are in percentages.
We recommend using percentages when you want to keep your design the same between screen sizes without having to manually adjust pixels on each breakpoint. For example, if your design contains two columns you can set each column width to 50% and the column widths will automatically scale to 50% on each screen size.
Using percentages is also helpful when you want element sizes to stay relative to each other across different screen sizes. With percentages, the element size is always scaled up or down relative to the parent element (section or column). For example, an image with 50% width inside a column will always scale to take up 50% of the column width regardless of screen size. So on mobile the column and the image will be narrower than on desktop, but the image will still be scaled to 50% width of the column. Another example is if you set the padding between columns to 4%, it will be narrower on mobile screens and wider on desktop screens, but it will still be proportionate to the columns and other elements on the screen.
Px
Pixels (Px) are a unit of measurement that remains the same no matter the size of the device. For example, if a button is 250px it will be the same size on mobile as it is on tablet or desktop. While there are times you need an element to stay the same size on all screen sizes, we recommend using percentages so that your design is responsive and you don’t have to spend extra time adjusting pixels on each breakpoint.
Vw
Viewport width (Vw) is a unit based on the width of the screen (viewport) that the site is viewed on. For example, 50 Vw means the element will scale to occupy 50% of the width of the screen it is viewed on.
Vh
Viewport height (Vh) is a unit based on the height of the screen (viewport) that the site is viewed on. For example, 25 Vh means the element will scale to occupy 25% of the height of the screen it is viewed on. This is helpful if you want to set a background image for the entire screen, you would set the image to 100% Vh.
A
Automatic unit of measurement that is determined by the content height. By default, this unit of measurement is used for text blocks because it ensures the text block height grows or shrinks according the amount of text inside it. And it is used for column height as well so the column grows or shrinks relative to the content inside of it.