Width

How wide the column should be across the page.

Where to find it
Labelled Width in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
width

In plain English

Width is how much horizontal room the column takes up. Left alone, a column takes only as much as its content needs, which is why an image or a short heading often ends up narrower than you expected.

The unit you choose matters more than the number. A width in pixels is a promise: 400px stays 400px whether the visitor is on a phone or a cinema display, which is exactly what you want for a logo and exactly what you do not want for a text panel. A width in percent is a proportion: 50% is always half of the row, so it keeps adapting as the screen changes.

Choosing "auto" hands the decision back to the browser, which sizes the column to fit its content.

What each option does

OptionWhat you will see
autoLet the content decide how wide the column is. This is the default behaviour.

When you would use it

  • You want two columns to split a row evenly: give each one 50%.
  • A text block stretches uncomfortably wide on large monitors and should be capped — though Max Width is often the better tool for that.
  • An image or card needs a specific, exact size.

How to change it

  1. Select the column, open "Selected Column", then "Width".
  2. Enter a number and choose a unit, or select "auto" to let the content decide.
  3. Check the result at each device size using the preview buttons above the canvas.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • A fixed pixel width wider than a phone screen causes sideways scrolling. Percentages, or a percentage width paired with a pixel Max Width, avoid this.
  • Padding and borders are added on top of the width you set unless the layout is doing something more clever, so a 100% width plus padding can overflow its row.
  • Percent widths only mean something when the row has a width of its own to divide up, which it normally does.

Related settings

For developers

The technical reference for what this setting produces: MDN: width. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next