Media rules for specific sizes
You may know the exact dimensions of the ad slots where you expect your creative to appear. In that case, you can set up media rules for specific sizes.
Common sizes
The Responsive panel lists common ad sizes for the current file's ad environment. These sizes cannot be edited or deleted.
Custom sizes
You can add more sizes to the Responsive panel.
Add a custom size
- Click Add custom size.
- Enter the dimensions that you want, and press Enter.
Edit a custom size
- Hover over the size that you want to edit.
- Click the edit
icon.
- Enter the new dimensions.
Delete a custom size
- Hover over the size that you want to delete.
- Click the delete
icon.
Media rules for size ranges
Manage range media rules
Add a range media rule
- In the panel:
- Click Add size range.
- Enter the minimum and maximum dimensions for the size range.
- Press Enter.
- In the dialog:
- Click within the viewport space and drag your mouse to draw a rectangle.
- If the rectangle turns red, the size range overlaps with an existing size range and can't be set.
- Click Save.
- Click within the viewport space and drag your mouse to draw a rectangle.
Change a range media rule's orientation
You can specify the orientation for a range media rule, so that its style overrides only take effect if the viewport is landscape or portrait.
- Click the orientation dropdown next to the range media rule.
- Select the new orientation:
Any orientation
Landscape
Portrait
Edit a size range
- In the panel:
- Hover over the range media rule and click the edit
icon.
- Enter the new minimum and maximum dimensions for the size range.
- Hover over the range media rule and click the edit
- In the dialog:
- Select the range media rule that you want to edit. Resizing handles appear along the blue box around the media rule shape.
- Either drag the shape to a new location, or drag one of the handles.
- To maintain the aspect ratio, hold the Shift key while dragging the resize handles.
- If the box turns red, the new size range overlaps with an existing size range and can't be set.
- Click Save.
Style overrides
Anything defined by CSS can be changed in a media rule, including size, position, visibility, source, and animation. Use style overrides to optimize your layout by adjusting properties for different viewport sizes.
Add or change a style override
- Select the media rule in the Responsive panel. The media rule is highlighted in the panel and displayed in the top left corner of the stage.
- Make the style change that you want.
The label for the overridden property is highlighted in yellow in the Properties panel.
Sizes with overrides display the Size-specific media rules icon in the Responsive panel.
Copy overrides for a media rule
- Do one of the following:
- To copy overrides for a specific size: Right-click the size in the Responsive panel.
- To copy overrides for a size range: Hover over the size range in the Responsive panel and click the More
icon that appears.
- Select Copy overrides from the pop-up menu.
- Do one of the following:
- To paste overrides to a specific size: Right-click the size in the Responsive panel.
- To paste overrides to a size range: Hover over the size range in the Responsive panel and click the More
icon that appears.
- Select Paste overrides from the pop-up menu.
Remove a style override
- In the Properties panel, click the yellow property label for the style override.
- Select Remove override in the pop-up dialog.
Remove all style overrides for a media rule
- For a specific size:
- Right-click the Size-specific media rules
icon for that size.
- Select Remove overrides from the pop-up menu.
- Right-click the Size-specific media rules
- For a size range:
- Hover over the range media rule.
- Click the more
icon.
- Select Remove overrides from the pop-up menu.