Max Width

A ceiling for the column's width — it will never grow wider than this.

Where to find it
Labelled Max 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
maxWidth

In plain English

Max Width is the most useful sizing setting in this panel, and it is often the right answer when you were reaching for Width.

It says "grow to fill the space you are given, but stop at this point". On a phone the column happily fills the screen; on a 32-inch monitor it stops at a comfortable size instead of stretching a paragraph into a single unreadable line.

The classic recipe for body text is a width of 100% with a max width of around 700px. Small screens get the full width, large screens get a readable column, and you did not have to write a single per-device value.

When you would use it

  • Paragraph text stretches too wide and becomes hard to read on large monitors.
  • A content area should be centred with a comfortable reading width — pair this with a Margin of "auto" on the left and right.
  • An image should scale down on small screens but never be blown up beyond its natural size.

How to change it

  1. Select the column, open "Selected Column", then "Max Width".
  2. Enter a number and choose a unit. Around 65–75 characters per line reads best, which for normal body text is roughly 600–800px.
  3. For the centred-content recipe, also set Margin left and right to "auto".
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

  • Max Width wins over Width, and Min Width wins over both. If your numbers contradict each other, that is the order the browser resolves them in.
  • A max width does not centre anything by itself — it just stops the growth. Add "auto" left and right margins, or use the row's Horizontal Alignment, to centre it.

Related settings

For developers

The technical reference for what this setting produces: MDN: max-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