In responsive web design, width and height properties are sized based on the content inside, but can be more specifically defined using pixels (px), percentages (%), ems, rems, viewport width (vw), viewport height (vh), viewport minimum and maximum (vmin and vmax), fractional units (fr), and character units (ch).
In this lesson, we’ll cover each of these units, as well as minimum and maximum values, overflow, and object-fit.
In this lesson:
- Automatic sizing
- Viewport-based units
- Fractional units
- Character units
- Minimum & maximum dimensions
- Object fit
By default, web elements are automatically sized based on what’s inside them.
Pixel values can scale proportionately with images and other elements that have an assigned pixel value.
To use the default pixel value:
- Type a numeric value
- Press Enter
Like ems, percentage refers to the parent element's font size. If you have padding on a section and set your width to 25%, it will take up 25% of the space inside the element.
Ems are practical when you want to set proportional padding on an element with text. Every browser has a default font size, which is usually 16px. Ems look to their parent element and scale the font size proportionally.
If a font is 16 pixels:
- 1 em is 16 pixels
- 2 ems 32 pixels
- 1.5 ems Is 24 pixels
You can also set the font size on a paragraph’s parent element, like a Div block:
- Select the parent element
- Change the font size (e.g. to 20 pixels) in the Style panel under Typography
When the parent element is 20 pixels:
- 1 em is now 20 pixels
- 2 ems is 40 pixels
- 3 ems — 60 pixels
Rems are relative to the HTML font size.
A rem is calculated by taking your rem value and multiplying it by the HTML font size (which respects the browser’s font size unless you manually change it in the code). This has the benefit of respecting a user’s browser preferences (if custom text size is set on the browser).
Rems look to the root (root ems) — they look to the HTML tag, which respects the browser’s default font size unless you change it. (Rems ignore font set on the element, or the element’s parent, and scale based on the font size of a browser.)
VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.
Fractional units (fr) work inside anything that’s set to Grid.
If you have a 4-column grid, each column defaults to 1fr — 1 fr is equal to 1/4th of the grid. If you add a column, each fr is equal to 1/5th. You can change these values (e.g., set the first column to 2fr). Fractional units automatically scale things — everything is automatically calculated, including column gaps.
Check out our CSS grid course on Webflow University.
CH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line.
For example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph’s typeface), and sets the paragraph’s boundary (its box) to equal the width of 60 zeros.
CH lets you set the width on a text element when you’re trying to limit the number of characters (based on the width of the font’s zero character.)
Minimum & maximum dimensions
If you set the width of an element to be 50%, it takes up 50% of the space inside its parent element (the Section). As you resize the viewport, the element scales accordingly.
If you set a minimum (e.g., 200px) and a maximum (e.g., 500px) width on an element, it remains 50% wide and stays within the minimum (200 pixels) and maximum (500px) width the viewport shrinks and expands.
A common design pattern is to set up a full-height section (e.g., a height of 100vh). This isn’t a problem until a browser gets shorter and elements begin to overflow or clip off at the bottom (which doesn’t look too great).
Pro tip: Use minimums to remove any explicit height from a section, and instead set the minimum height to 100vh. Now your section won’t get shorter than 100% of the viewport height.
If you want to set a section height at 800 pixels, setting it as minimum height means it’ll be 800 pixels tall while respecting the width of its content (it can get taller if it needs to).
Say you never want a paragraph to go more than 60-ish characters wide, you can select any paragraph, click into the All Paragraphs tag and set a maximum width (e.g., 60ch). Now your default, unless you override it, will self-limit paragraphs at 60 characters (60 zeroes in whatever the typeface is).
Overflow happens automatically when there’s a width and height set on an element and not enough room for the content inside. By default, text that overflows is visible. If you select your element, click into the Style panel > Size > Overflow, you’ll see the first icon, the visible (eye) icon, is selected by default, which means that the text that overflows defaults to visible.
Other options for overflow are:
- Hide clips (hides) content outside the boundary of an element.
- Scroll, depending on someone’s operating system and browser, it can display a scroll bar so people can scroll through the contents of a Div block.
- Auto allows people to scroll (only do this if there’s enough content to overflow in the first place)
To use object fit, head to the Size section in the Style panel:
- Set a width and a height on the parent element (e.g., the Div block)
- Set a width and a height of 100% on the on the child element (e.g., your image inside the Div block)
- Test the fit properties: fill, contain, cover, none, and scale down — choose the best option for your project
Note: Make sure parent elements have a width and a height when working with object fit. This is because all object fit options fit content inside a parent element, but object fit is set on the child of a parent.