Size Units
Learn about the different size units you can use for boxes placed on your pages. Choosing the right unit helps you create responsive designs and flexible layouts.
How to Set Size Units
Select a box and choose your preferred unit from the box style menu at the top of the editor.
There are several different size units in Studio.
1. px (Pixels)
Pixels are fixed values. The number you set becomes the maximum size, and the element automatically scales down when the screen width becomes narrower.
Best for:
Elements that need consistent sizing, like logos and icons
2. % (Percentage)
Percentage units are relative to the size of the parent element (box or page). When the parent element's size changes, the child element maintains its proportional size.
Best for:
Setting widths in multi-column layouts
3. auto
When you set a parent box to auto, its size automatically adjusts based on its content. We recommend setting the height of parent boxes to auto by default, as it makes layouts more adaptable.Pro tip: You can also switch to auto by double-clicking a box's border.
Best for:
Parent boxes with variable content, like expandable sections or "show more" buttons
Note: If you set the size unit of a container box to auto and its child boxes to %, it won't work. If you want to set the parent box in percent or pixels, the size of the child box is relative.
4. flex
Flex units define width ratios between adjacent boxes, helping you distribute space among sibling elements.
Best for:
Photo gallery layouts
Column ratio specifications
For example, setting three boxes to "1flex : 2flex : 1flex" creates a 1:2:1 ratio display.
5. vw (Viewport Width)
This unit is based on the browser's viewport width. Setting an element to "100vw" makes it automatically adjust to the browser's width.
Best for:
Full-width background images
6. vh (Viewport Height)
Similar to vw, but for height. An element set to "100vh" will always fill the full browser height, regardless of its parent box.
7. dvh (Dynamic Viewport Height)
This unit is based on the actual visible content area in the browser.On mobile devices, the visible area can change when the URL bar shows or hides during scrolling. dvh automatically adjusts to these changes, ensuring proper display.
Key difference from vh:
vh: Based on total screen height, may be affected by URL bar visibility
dvh: Based on actual visible area, maintains consistent display
Best for:
Full-screen sections
Full-height modals
Fixed position elements like buttons or banners
Choosing the Right Unit
Select your size units based on your design needs:
Fixed sizes: px
Relative to parent: %
Content-based sizing: auto
Element ratio control: flex
Viewport-based sizing: vw/vh/dvh
Picking the right unit helps create more flexible and maintainable layouts that work across different screen sizes and devices.