Sizes and ranges in the responsive panel

Responsive features are not supported in AMPHTML ads. Video ads, animated GIFs and image ads can use multi-size layouts.

The Sizes and ranges tab in the responsive panel helps you create and manage responsive content that changes with the viewport size and orientation. For video ads, animated GIFs and image ads, the responsive panel lets you configure a multi-size layout instead.

Responsive layout

Enable media rules

When the responsive layout box is ticked, the page's width and height are set to 100% and media rules are enabled.

Switch to a fixed-size document

To change a responsive document to a fixed size, make sure that only a single serving size is enabled and that it has no overrides, then untick the Responsive layout box.

Edit base document

When you're editing the base document, any changes that you make are used by default for all sizes. This means that Edit base document must be selected in the responsive panel if you want to add or delete assets, components or events.

You can also resize the viewport while you're editing the base document.

When a media rule is selected, some panels are disabled (greyed out), as changes in those panels can't be limited to specific sizes. Select Edit base document in the Responsive panel to enable these panels.

Sizes

The sizes section of the responsive panel lists the specific sizes in which your ad might be viewed. Select a size to switch to that viewport size and to add or change overrides for that size.

Common sizes

The Sizes section of the responsive panel is pre-populated with common sizes for your ad environment. The common sizes can't be edited or deleted.

Custom sizes

You can include other sizes in the list by adding a custom size.

• To add a custom size: Click Add custom size and enter the dimensions of the new size.

• To edit a custom size: Hover over the size and click the Edit button.

• To delete a custom size: Hover over the size and click the Delete button.

Filter sizes

Use the drop-down to filter the size list to sizes that you've enabled for serving or preview:

• All sizes
• Serving sizes
• Preview sizes

Serving sizes

Serving sizes are the ad slot sizes in which you expect your ad to be served. Responsive documents must have at least one serving size.

• To add or remove a serving size: Tick or untick the tick box under the Serving size icon. You can enable a maximum of 40 serving sizes.

Preview sizes

Your document is displayed in the selected preview sizes within the responsive preview panel and when you preview your document within a browser.

• To add or remove a preview size: Tick or untick the tick box under the Preview size icon. Preview sizes must also be serving sizes.

• To open the responsive preview panel:
  • Click the Responsive preview button in the responsive panel.
  • Select View > Responsive > Preview from the top menu.

Size-specific media rules

When a size is selected in the Responsive panel, you can add and change overrides that apply only when the viewport is that size.

Media rules with overrides display the Size-specific media rules icon.

Learn more about managing media rules for specific sizes.

Range media rules

Overrides that apply to multiple sizes are set in range media rules. Select a range media rule to switch to a viewport size within that range and to add or change overrides for that size range.

• To add a range media rule: Click Add size range to add a new size range, then specify the minimum and maximum dimensions for the size range.

• To edit a range media rule's dimensions: Hover over the range and click the Edit button.

• To change a range media rule's orientation: Click the orientation icon (or the landscape or portrait icon), then select the new orientation from the drop-down.

• To delete a range media rule: Hover over the range and click the Delete button.

Orientation

Range media rules can be set to apply only when the viewport is either landscape or portrait.

Any orientation
Landscape
Portrait

Manage range media rules

Click the Manage range media rules icon to open a dialogue with a visualisation of the size ranges that you've configured.

Learn more about managing media rules for size ranges.

Overrides

To view the overrides for a size or a size range, select that size or size range, then switch to the Overrides tab in the Responsive panel.

Learn more about viewing and managing overrides.