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.
- Click the Responsive preview
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.
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.