Understand responsive ranges and fluid typography
POM uses the same four width ranges for Page Builder visibility and responsive spacing, but the interface gives them different descriptive labels.
Width ranges
| Width | Device visibility label | Spacing label |
|---|---|---|
| Above 992 px | Large | Desktop |
| At least 768 px and below 992 px | Medium | Tablet (horizontal) |
| At least 544 px and below 768 px | Small | Tablet (vertical) |
| Below 544 px | Extra small | Mobile |
Treat these as viewport ranges, not guarantees about a visitor's physical device.
Visibility and spacing behave differently
Device visibility determines whether a supported component is displayed in a range. The Spacing group stores separate padding and margin values for each range.
A hidden parent also hides its children. A spacing value changes layout but does not change visibility.
Typography is fluid
H1–H6 and Display 1–4 can use a base size plus viewport width relative font-size. This changes continuously with viewport width rather than switching only at the four Page Builder ranges.
An optional max font size takes over at widths of at least 1920 px.
Review responsive behavior
Test:
- one width inside each configured range;
- the boundaries around 544, 768, and 992 px;
- a large screen at or above 1920 px when maximum heading sizes are set;
- intermediate widths where fluid headings may wrap.
Check content order, typography, spacing, backgrounds, controls, and hidden content together. A page can pass at four fixed screenshots and still fail between them.
For detailed layout guidance, see Rows, columns, spacing, and responsive design.