The Responsive panel helps you create and manage responsive content that changes with the viewport size and orientation.
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.
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.
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.
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.
Use the dropdown to filter the size list to sizes that you've enabled for serving or preview:
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.
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.
Range media rules can be set to apply only when the viewport is either landscape or 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.