Styling & Design
Sizing & units
Set width and height, understand px, %, rem, vw and vh, and use overflow and object-fit — the controls in the Dimension sector.
Last updated 2026-06-29
This guide covers how big an element is — its width and height — and the units those measurements use. These controls live in the Dimension sector of the Customize tab. Units come up everywhere in styling, so this is worth reading once.
Width and height
- Width — how wide an element is.
- Height — how tall it is.
Most of the time you should set width and let height take care of itself (an element grows tall enough to fit its content automatically). Forcing a fixed height often causes content to overflow or get cut off.
There are also minimum and maximum versions:
| Control | Use it to… |
|---|---|
| Min width / Min height | Stop an element from shrinking below a size. |
| Max width / Max height | Stop an element from growing past a size — great for keeping text columns readable. |
A very common, robust pattern is width: 100% with a max-width (e.g. 1200px): the element fills the space on small screens but never gets too wide on big ones.
Units — what px, %, rem, vw, and vh mean
A number alone isn't enough; it needs a unit that says what it's measured against.
| Unit | Means | When to use |
|---|---|---|
| px (pixels) | A fixed size. 200px is always 200px. | Borders, small fixed elements, exact sizes. |
| % (percent) | Relative to the parent element. 50% width = half the container. | Flexible widths that adapt to their container. |
| rem | Relative to the site's base font size (usually 16px, so 1rem = 16px). | Font sizes and spacing that scale together. |
| em | Relative to the element's own font size. | Spacing that should track the element's text size. |
| vw / vh | Percent of the viewport (the browser window) width / height. 100vh = full screen height. | Full-screen sections and hero areas. |
| auto | "Figure it out for me." | Let the browser size or center an element. |
Don't overthink it. For most layouts, % for widths, px or rem for fonts and spacing, and auto for heights will serve you well. Reach for
vw/vhonly for full-screen effects.
Overflow — when content is too big
If content is larger than its box, overflow decides what happens:
- Visible — content spills outside the box (the default).
- Hidden — anything outside the box is clipped off.
- Auto / Scroll — the box gets a scrollbar so you can scroll the extra content.
Sizing images: object-fit and aspect ratio
When you give an image a fixed width and height, object-fit controls how the picture fills that space:
- Cover — fill the box, cropping the edges if needed (no distortion).
- Contain — fit the whole image inside (may leave gaps).
- Fill — stretch to fit (can distort — usually avoid).
Aspect ratio lets you lock a shape — like 16/9 for video thumbnails — so the element keeps its proportions as it resizes.
Box sizing (a useful default)
The box sizing control decides whether width includes padding and border. Webpress uses the sensible border-box by default, which means the width you set is the final width — padding doesn't push it wider. You'll rarely need to change this.
Where to go next
- Spacing — margin & padding — the other half of sizing a layout.
- Layout: flexbox & grid — sizing elements relative to each other.