The Responsive panel

This feature is unavailable for AMPHTML ads.

The Responsive panel helps you create and manage responsive content.

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 style overrides, then uncheck the Responsive layout box.

Edit default rules

When you're editing the default rules, any changes you make affect the entire document. Any change that isn't a CSS style override should be made while the default rules are active. This means that Edit default rules 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 default rules.

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 style 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 style overrides that apply only when the viewport is that size.

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

Learn more about managing media rules for specific sizes.

Range media rules

Style 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 style 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.