Skip to main content

Create equal-width and Auto field rows

Use a normal 12-column width when different items need different proportions. Use Equal widths when every item inside one Builder column should receive the same space—especially for five fields, because five cannot be divided into exact integer spans on a 12-column grid.

Create five equal search fields

  1. Open Store Locator → Builder and edit the Search form.
  2. Put the five fields inside the same Builder column. They must be sibling items, not fields spread across five separate columns.
  3. Click the parent column's dashed container rather than an individual field.
  4. In Column settings → Layout, find Items inside this column.
  5. Select Equal widths.
  6. Set Desktop columns to Auto — all 5 items equally.
  7. Set Tablet columns to the number that should fit on each row, such as 3.
  8. Set Mobile columns to 1 for a vertical stack, or 2 for two controls per row.
  9. Save, preview Desktop/Tablet/Mobile, and test the embedded locator.

With Desktop Auto, each of the five fields occupies exactly one-fifth of the available inner width. The column's Item gap remains between the fields and is not counted as part of their widths.

What Auto means

Auto means one equal track per current non-overlay item. It does not mean browser intrinsic width, fit-content, or a minimum-width auto-fit grid.

  • 3 sibling items become three equal tracks.
  • 4 sibling items become four equal tracks.
  • 5 sibling items become five equal tracks.
  • Adding a sixth item automatically changes the row to six equal tracks.
  • Removing an item recalculates the equal shares.

Choose a number instead of Auto when you want wrapping. Five items with Tablet columns = 3 render as three items on the first row and two on the next. With Mobile columns = 1, all five stack.

Custom widths versus Equal widths

ModeUse it forWidth behavior
Custom widthsMap/List splits, a large Location field beside compact actions, asymmetric cardsEach item uses its own Width and Mobile width from 1 to 12
Equal widthsUniform filter bars, five equal fields, equal action groupsThe parent column sets the number of equal tracks for Desktop, Tablet, and Mobile

Switching to Equal widths does not delete each item's saved 12-column values. Those individual values are ignored while Equal widths is active and become effective again if the parent column returns to Custom widths.

Useful responsive combinations

GoalDesktopTabletMobile
Five equal filters, then stackAuto31
Four equal actions, two per row on smaller screensAuto22
Three equal controls, then stackAuto31
Keep every item on one equal row at every sizeAutoAutoAuto

Keeping five fields on one mobile row normally makes labels and controls too narrow. Use Mobile 1 or 2 unless the controls are intentionally compact.

If the fields are not equal

Check the following:

  1. All fields are inside the same parent column.
  2. Items inside this column is set to Equal widths, not Custom widths.
  3. You changed the column settings rather than an individual field's Width slider.
  4. The active Desktop, Tablet, or Mobile column count matches the preview device.
  5. No field is using Overlay position. Overlay items are positioned independently and are not counted when Auto calculates equal tracks.
  6. The latest design was saved and the embedded page cache was cleared.

For the complete Builder hierarchy and the 12-column span table, see Rows, columns, widths, content, and responsive controls.