How tall or wide an element is depends on what values you set for the width or height properties. These dimensions can be fixed values or relative values. This article covers the following:

  • Auto-sizing (auto)
  • Pixel (px)
  • Percentage (%)
  • Viewport height (vh)
  • Viewport width (vw)
  • Minimum (min) & Maximum (max)

You can change values for width and height in the Styles Panel, under the Layout section. We’ll be covering how each of these unit types work in the context of setting element dimensions.

Setting element width and height in Webflow
PRO TIP: When a numerical field is focused, you can use the up and down arrows on the keyboard to increase or decrease the value by 1. Holding Shift while doing this will increase or decrease the value by 10.

Auto-sizing (auto)

Setting element width and height in Webflow

The default value for width and height is auto. When the height is set to auto on any element, the height will automatically change based on how much content is inside the element. In responsive design, it’s best practice to keep the height set to auto and use the content inside, along with top and bottom padding, to create height.

When the width is set to auto, elements behave differently depending on their display setting:

  • Block elements means it will fill 100% width of the parent element.
  • Inline block elements will be only as wide as the contents inside of it
  • Inline elements actually don’t have a width or height
  • Flex container will fill 100% width of the parent element, similar to block  
  • Flex items are dependent on the width of its contents and flex layout set on the flex container

Pixel (px)

Pixel is the default unit when setting any dimension and setting a width or height to a pixel value will make it “fixed”. That means that it will always stay that value no matter the size of the viewport/screen. Setting width using pixel values is therefore not ideal for responsive design.

 

Setting a height in pixels is usually not necessary since by default the height of an element is best defined by the contents and padding inside the element. If setting a height is necessary, it’s best practice to set a minimum-height—read more about this property below.

Percent (%)

Percentage values are relative to an element’s parent. So, when you set a 90% width on an element, that element will take up 90% of it’s parent width. Using percentage units for width is great for responsive design because the element automatically responds to the parent width.

 

Setting the height to a percent value won’t do anything unless there’s an non-percent value, like a pixel value or vh, set on its parent.  

Viewport height (vh)

VH can be used to set an element's height relative to the height of the viewport. 50vh is 50% of the viewport height. This unit is useful when building responsive layouts because it will automatically respond to the device’s viewport height.

To set vh units, type in the value and the unit into the field like “100vh” and press enter.

 
When setting a height it’s best to set a minimum-height so that the element height can stretch if its contents exceed the set height. Read more about min-height below.

Viewport width (vw)

VW can be used to set an element's width relative to the width of the viewport. 50vw is 50% of the viewport width.

VW vs Percent

A width set in percent (%) is relative to the width of the parent element, but a width set in vw is relative to the entire viewport width. The viewport width changes when the devices size changes or when the browser is resized horizontally on desktop.

 
Pro tip: Setting 100vw includes the width of the scrollbar, so the element may extend outside your body element on certain browsers or operating systems. It’s recommended to use 100% width instead of 100vw width.

Minimum (min) & Maximum (max)

Setting minimum and maximum width and height values in Webflow

You can set minimum and maximum values for width and height. This lets you specify the smallest or the largest you’d ever want an element to get.

Minimum width & height

The default value for min-height and min-width is 0px. In other words, by default the smallest width or height an element can have is 0px. When you define a minimum width or height, you are telling this element to never be smaller than this value.

 

Setting a min-width or min-height is a better practice for responsive design than setting a normal width or height. When setting a min-width or min-height, the element is allowed to grow when the content inside increase beyond the minimum value. When setting a width or height, the dimensions will be fixed and any extra content will overflow outside the element instead of increasing the dimensions of the element.

For example, setting the min-height on a div block to 200px will set its height to 200px. If you add a bunch of content inside, it will make the height grow beyond the 200px.

Maximum width & height

The default value for max-width and max-height is none. That’s because element dimensions increase when the content inside of them increases, so by default they are allowed to grow as tall as they want. When you define a maximum width or height, you are telling this element to never get bigger than this value.

 

For example, setting the max-height on a div block to 200px will not show anything until you add a bunch of content inside that will hit that 200px limit. When the div block reaches 200px height it will not grow even if there is more content inside.

PRO TIP: Setting a width and a max-width value is common and very useful. For example, you can set a section to have 80% width so it’ll behave like that on all devices. Then set the max-width to 1200px so that it never goes beyond that width on bigger screens.