# layout.breakpoints

Part of [Layout](https://kernstra.com/docs/web-sdk/config/layout) in the Kernstra Web SDK 1.0.0 configuration reference.

- Type: `LayoutBreakpoints`
- Page: https://kernstra.com/docs/web-sdk/config/layout/breakpoints

Container widths for each size class. Thresholds are inclusive, so a container exactly 640px wide is `narrow`. Breakpoints are normalized so `tiny <= narrow <= compact` always holds, whatever you pass; a class whose threshold equals the one above it is never selected.

```ts
new PDFViewer(container, doc, {
  layout: {
    breakpoints: { compact: 1024, narrow: 700, tiny: 520 },
  },
});
```

### `breakpoints.compact`

- Type: `number`
- Default: `900`
- Page: https://kernstra.com/docs/web-sdk/config/layout/breakpoints-compact

The container width at and below which the viewer is `compact`.

### `breakpoints.narrow`

- Type: `number`
- Default: `640`
- Page: https://kernstra.com/docs/web-sdk/config/layout/breakpoints-narrow

The container width at and below which the viewer is `narrow`.

### `breakpoints.tiny`

- Type: `number`
- Default: `480`
- Page: https://kernstra.com/docs/web-sdk/config/layout/breakpoints-tiny

The container width at and below which the viewer is `tiny`.

Web page: https://kernstra.com/docs/web-sdk/config/layout/breakpoints