> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adxensor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ad Formats

> All standard IAB display ad sizes plus a responsive auto mode that adapts to each visitor's device and layout.

AdXensor supports all standard IAB display ad sizes plus a responsive `auto` mode. Choose the format that fits your page layout, or use `auto` to let the SDK pick the best size for each visitor's device.

## Supported formats

| Format value | Dimensions   | Common name                 | Best placement                              |
| ------------ | ------------ | --------------------------- | ------------------------------------------- |
| `728x90`     | 728 × 90 px  | Leaderboard                 | Top or bottom of page, above/below articles |
| `970x90`     | 970 × 90 px  | Super leaderboard           | Wide desktop headers                        |
| `970x250`    | 970 × 250 px | Billboard                   | Desktop hero sections                       |
| `300x250`    | 300 × 250 px | Medium rectangle            | Sidebar, in-content, between paragraphs     |
| `300x600`    | 300 × 600 px | Half page / Large rectangle | Sidebar, sticky units                       |
| `160x600`    | 160 × 600 px | Wide skyscraper             | Narrow sidebars                             |
| `320x50`     | 320 × 50 px  | Mobile banner               | Mobile-only top/bottom bars                 |
| `320x100`    | 320 × 100 px | Large mobile banner         | Mobile in-content                           |
| `468x60`     | 468 × 60 px  | Full banner                 | Tablet header/footer                        |
| `auto`       | Dynamic      | Responsive                  | Any placement                               |

## Responsive mode (`auto`)

When you set `data-ad-format="auto"`, the SDK resolves the best concrete size based on the visitor's device and the available container width at render time:

| Device               | Container width | Selected format |
| -------------------- | --------------- | --------------- |
| Mobile (\< 768 px)   | ≥ 320 px        | `320x50`        |
| Mobile (\< 768 px)   | \< 320 px       | `300x250`       |
| Tablet (768–1023 px) | ≥ 468 px        | `468x60`        |
| Tablet (768–1023 px) | \< 468 px       | `300x250`       |
| Desktop (≥ 1024 px)  | ≥ 728 px        | `728x90`        |
| Desktop (≥ 1024 px)  | ≥ 468 px        | `468x60`        |
| Desktop (≥ 1024 px)  | \< 468 px       | `300x250`       |

## Using a format

<Tabs>
  <Tab title="CDN snippet">
    ```html theme={null}
    <ins class="adxensor"
         style="display:block"
         data-ad-slot="my-slot"
         data-ad-format="300x250">
    </ins>
    ```
  </Tab>

  <Tab title="npm (React / Next.js)">
    ```tsx theme={null}
    <ins
      className="adxensor"
      style={{ display: 'block' }}
      data-ad-slot="my-slot"
      data-ad-format="300x250"
    />
    ```

    Or using the programmatic API:

    ```typescript theme={null}
    adx.defineSlot('#my-slot', { format: '300x250' });
    ```
  </Tab>
</Tabs>

## Slot sizing recommendation

<Tip>
  Always ensure your container is at least as wide as the ad format you request. If the container is narrower than the requested format, the ad may overflow or appear cut off.

  For fluid layouts, prefer `auto` or a format smaller than the narrowest expected container width.
</Tip>

## TypeScript

The `AdFormat` type is a strict union of all valid format strings:

```typescript theme={null}
import type { AdFormat } from '@adxensor/publisher-sdk';

const format: AdFormat = '300x250'; // ✅ type-checked
const bad: AdFormat = '400x200';    // ❌ TS error
```