Setting Exact Height and Width on Elements

The Container Size control lets you size any element precisely, with separate values for desktop and mobile, so you can skip custom CSS.

Set a Size

  1. Open the page in the editor and select the element (text, button, image, form and so on).
  2. In the right sidebar, open the Styles tab and scroll to Container Size.
  3. Use the dropdown beside Height and Width to pick a unit.
  4. Enter your values.
  5. Click the device toggle to switch to Mobile and enter different numbers if needed.

Units Explained

  • px: a fixed number of pixels.
  • %: a share of the parent column, row or section.
  • em / rem: scales with font size.
  • vh / vw: a share of the visible screen height or width.
  • auto: lets the browser decide.

Decimals work, so three equal cards can use 33.33% each. Check mobile afterward in case they wrap.

Reset and Limits

  • To undo a size, set the unit back to auto.
  • Values set in mobile view affect only mobile and leave desktop untouched.
  • Zero and negative numbers are not accepted. The element simply keeps its current size.
  • Use size together with margin and padding for full layout control.

Good to know: Percentages are usually safer than pixels for widths, because they adapt as the container changes on different screens.

Was this article helpful?