The Responsive panel

Responsive features are not supported in AMPHTML ads or video ads.

The Responsive panel helps you create and manage responsive content that changes with the viewport size and orientation.

Responsive layout

Enable media rules

When the Responsive layout box is checked, 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 only a single serving size is enabled and that it has no overrides, then uncheck the Responsive layout box.

Edit base document

When you're editing the base document, any changes you make are used by default for all sizes. This means that Edit default 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 (grayed 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 dropdown 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 toggle a serving size: Select the checkbox 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 toggle a preview size: Select the checkbox 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, then select the new orientation from the dropdown.

• 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 dialog with a visualization of the size ranges you've configured.

Learn more about managing media rules for size ranges.