How do I set width and height in Webflow?

Set the size in the Size section

By default, an element fills the width of its parent or takes the size of what is inside it. Select the element and open Style panel, Size. That section is where width, height, min, max, aspect ratio, overflow, and fit live. Some size settings are disabled on a container.

Type a number and press Enter to use pixels. Pixels are the unit when you want a card, an avatar, or a logo to stay a known size. Automatic sizing is still the right start for a paragraph, because the text should decide the height.

Example: a testimonial card should be 360 pixels wide inside a wide section. Select the card, set width to 360px, and leave the height on auto so a longer quote makes the card taller. Do not set a height of 180px unless you have checked the longest quote.

Pick a unit that follows the parent

A percent width is a share of the space inside the parent. A width of 50% takes half of that parent. It is not half of the screen unless the parent itself is the screen.

Em follows the parent element's font size. If that font size is 20px, 1em is 20px and 2em is 40px. Rem follows the root HTML font size, which respects the browser text size unless code changes it. Viewport width (vw) and viewport height (vh) follow the browser window.

Fractional units (fr) are only for a grid, including Quick Stack. In a 4 column grid, 1fr is one quarter. Adding a column makes each fr one fifth. Do not type 1fr on a section that is not a grid and expect a column.

Safari, including on iOS, can lay out a percent or auto width or height differently when no parent has a fixed size in pixels. A section at height 100% can collapse. A min height in pixels on the body or on a parent wrapper is the fix Webflow documents, such as 600px.

Use a floor and a ceiling

A width of 50% scales as the window changes. Add a minimum and a maximum when that scale should stop. Webflow's example is a 50% width with a minimum of 200px and a maximum of 500px: the element stays 50% of the parent, and it stays inside those two limits.

A fixed height is the setting that clips. A section at 100vh looks full on a tall screen and cuts the last lines when the window is short. Clear that height and set min height to 100vh. The section will not get shorter than the viewport, and the content can still extend it.

The same idea works in pixels. A min height of 800px means the section is at least 800px tall, and it grows if the content needs more. Use that for a hero that has a heading, a paragraph, and a button, instead of locking the box to 800px and hiding the button.

Keep a line of text readable

Character units (ch) size a text box from the font's zero. A maximum width of 60ch is the width of 60 zeros in the typeface on that element. Webflow's example is to select a paragraph, open the All Paragraphs tag, and set that maximum so paragraphs stop near 60 characters unless you override one of them.

That maximum is a width, not a character counter. A wide letter and a narrow letter still differ. Check a real sentence on the page after you set it. A heading can keep a smaller max width than the body if the display type would otherwise run across the section.

The margin and padding guide is the space outside and inside the box. Width does not add that gap. The center guide is how to place the sized box in the parent.

Check a small window before you publish

Resize the canvas after the numbers are in. A 360px card that fits on desktop can overflow the phone if the parent is narrower than 360px. On the mobile portrait breakpoint, set the card width to 100%, or lower the minimum, so the page does not scroll sideways. The mobile layout guide is the pass for a page that already scrolls.

If both width and height are set and the content does not fit, overflow is visible by default. You will see the extra text outside the box. Raising the min height is usually the better fix for a sentence. Hiding the overflow is a clip, and it can cut a word.

Setting a width on a section you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.