Responsive Ad Sizing

How Advlume filters ad sizes for each visitor's viewport, applies GPT size mapping for mobile/desktop breakpoints, and why you don't need to add data-sizes to your HTML snippets.

Advlume handles responsive ad sizing automatically. The wrapper detects the visitor's viewport width, filters out sizes that don't fit, and sends only the appropriate sizes to demand partners — all without any configuration on your part beyond assigning sizes to your ad units.

How the size pipeline works

1. API sizes are applied. When the wrapper loads, it fetches your site config from the CDN. The sizes you configured per ad unit in the dashboard override any data-sizes attribute in the HTML snippet.
2. Viewport filter runs. Any size wider than window.innerWidth is removed from the slot's size set. If this removes all sizes, the slot is dropped for this page load. Video and outstream slots are exempt.
3. Slot width filter runs. Sizes wider than the slot container's actual rendered width (not just the viewport) are also filtered, ensuring the creative cannot overflow its container.
4. GPT size mapping is applied. If a slot has both mobile sizes (≤320px wide) and desktop sizes (>320px wide), the wrapper builds a GPT size mapping with two breakpoints:
   • Viewport ≥ 768px: desktop sizes
   • Viewport < 768px: mobile sizes
   GPT uses this mapping to re-evaluate eligible sizes if the browser window is resized.

Breakpoint reference

Viewport width	Label	Sizes Prebid considers
0–767px	Mobile	300×250, 320×50, 320×100, 300×50
768px+	Desktop	728×90, 300×250, 970×90, 970×250, 468×60, 336×280, 320×50, 320×100, 300×50

These are the globally-enabled sizes. The specific sizes delivered to any given slot are the intersection of the global set and the sizes configured for that slot in your dashboard.

Do I need to add data-sizes to my HTML?

No. The data-sizes attribute on the slot div is optional and serves only as an emergency fallback. The Advlume API is the source of truth. If you omit data-sizes (which is the recommended approach), the wrapper applies the sizes from your dashboard configuration automatically.

If you do include data-sizes, it will be overridden by the API sizes after the config is fetched. The attribute is only used in the rare case where the config fetch fails entirely.

Preventing layout shift (CLS)

The slot container has no height until the creative loads, which can cause content below it to jump. To prevent this, add a min-height in CSS equal to the tallest size you expect:

<div
  data-advlume-site="YOUR-SITE-UUID"
  data-advlume-slot="leaderboard"
  style="min-height:90px"
></div>

See Layout Shift (CLS) Issues for a full walkthrough.

Further reading

• Supported Banner Sizes — the full size reference table
• Layout Shift (CLS) Issues — preventing content jumping when ads load
• Adding Ad Unit Divs — snippet reference