# Responsive Coverage

**MUST** · **ID:** `layout-responsive-coverage` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-responsive-coverage

> MUST: Verify mobile, laptop, ultra-wide (simulate ultra-wide at 50% zoom)

Verify on mobile, laptop, and ultra-wide screens

Test your layouts at 320px (small mobile), 768px (tablet), 1280px (laptop), and 2560px+ (ultra-wide). Content should reflow appropriately, never horizontally scroll unexpectedly, and use available space effectively at all sizes.

## Bad — do not do this

`layout-responsive-coverage-bad`

```tsx
export function ResponsiveCoverageBad() {
  return (
    <div className="w-full">
      <div className="bg-card border border-border rounded-lg p-4" style={{ width: '800px' }}>
        <h3 className="text-lg font-semibold mb-4">Dashboard</h3>
        <div className="grid grid-cols-4 gap-4">
          <div className="p-4 bg-primary/10 rounded">Metric 1</div>
          <div className="p-4 bg-primary/10 rounded">Metric 2</div>
          <div className="p-4 bg-primary/10 rounded">Metric 3</div>
          <div className="p-4 bg-primary/10 rounded">Metric 4</div>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Fixed width causes horizontal scroll on smaller screens
      </p>
    </div>
  );
}
```

## Good — do this

`layout-responsive-coverage-good`

```tsx
export function ResponsiveCoverageGood() {
  return (
    <div className="w-full max-w-4xl">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-4">Dashboard</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="p-4 bg-primary/10 rounded text-sm">Metric 1</div>
          <div className="p-4 bg-primary/10 rounded text-sm">Metric 2</div>
          <div className="p-4 bg-primary/10 rounded text-sm">Metric 3</div>
          <div className="p-4 bg-primary/10 rounded text-sm">Metric 4</div>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Responsive grid adapts to screen size
      </p>
    </div>
  );
}
```

## References

- [Responsive Design](https://web.dev/articles/responsive-web-design-basics)