Breakpoints

Foundation

Breakpoints

The responsive breakpoints PDS Health layouts are composed against. Each range maps a viewport window to a layout behavior — how many columns render and how content reflows as the screen widens.

Browser Breakpoints
Five viewport ranges, from mobile through desktop. Bars are scaled to each range’s upper bound on a 0–1600px reference.

Mobile0–480px

Mobile Landscape481–768px

Tablet Portrait769–1024px

Tablet Landscape1025–1280px

Desktop1281px +

1440px Site standard width — the canonical desktop design width all layouts are composed against.

Breakpoint	Range
Mobile	`0–480px`
Mobile Landscape	`481–768px`
Tablet Portrait	`769–1024px`
Tablet Landscape	`1025–1280px`
Desktop	`1281px and up`

Columns & Grid
Column count per breakpoint. Mobile and Mobile Landscape stack to a single column; tablets move to two; desktop supports authored layouts of two to four columns.

Breakpoint	Columns
Mobile	`1 column`
Mobile Landscape	`1 column`
Tablet Portrait	`2 columns`
Tablet Landscape	`2 columns`
Desktop	`Authored (2–4 columns)`

Pink areas are margins and gutters; white areas are columns.

Mobile — 1 column

1 column · full-width stack

Tablet — 2 columns

2 columns

Desktop — up to 4 columns

2 to 4 authored columns · 4 shown

Source of truth: O2 Design System Figma. Confirm the canonical breakpoint frame/node, these values stay in sync with the file.