Manage media rules and style overrides

Media rules let you override the default styles for different viewport sizes. A media rule applies to either a specific size or a size range.
To work with media rules, open the Responsive panel and make sure the Responsive layout box is checked. Select a size or size range in the panel to set style overrides for that media rule.

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

  1. Click Add custom size.
  2. Enter the dimensions that you want, and press Enter.

Edit a custom size

  1. Hover over the size that you want to edit.
  2. Click the edit icon.
  3. Enter the new dimensions.

Delete a custom size

  1. Hover over the size that you want to delete.
  2. Click the delete trash can icon icon.

Media rules for size ranges

Range media rules apply to all the sizes within the size range that you specify. Optionally, you can limit range media rules to portrait or landscape orientation.
The size ranges for range media rules cannot overlap with each other. Range media rules can overlap with media rules for specific sizes, in which case both sets of style overrides apply for those sizes. If there's a conflict, then the media rule for the specific size takes priority.

Manage range media rules

For a visualization of your range media rules, click the Manage range media rules button in the Responsive panel. You can also click the More icon for a range media rule and select Open dialog... from the pop-up menu.
This range media rule affects two serving sizes with overrides
The dialog displays the viewport space, which is an area bordered by rulers indicating the width and height. Each serving size is a point within the viewport space at the corresponding width and height coordinates.
A range media rule is represented as a shape that outlines the corresponding part of the viewport space. Range media rules that apply to any orientation are displayed as rectangles, while range media rules limited to portrait or landscape orientation may be represented by other shapes.
Serving sizes are displayed in the viewport space as small squares so you can see if they will be affected by the range media rule. Serving sizes with style overrides are colored yellow. You can't edit serving sizes within the dialog.

Add a range media rule

  • In the panel:
    1. Click Add size range.
    2. Enter the minimum and maximum dimensions for the size range.
    3. Press Enter.
  • In the dialog:
    1. 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.
    2. Click Save.

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.

  1. Click the orientation dropdown next to the range media rule.
  2. Select the new orientation:
    • Any orientation
    • Landscape
    • Portrait

Edit a size range

  • In the panel:
    1. Hover over the range media rule and click the edit icon.
    2. Enter the new minimum and maximum dimensions for the size range.
  • In the dialog:
    1. Select the range media rule that you want to edit. Resizing handles appear along the blue box around the media rule shape.
    2. 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.
    3. 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

  1. 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.
  2. 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

  1. 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.
  2. Select Copy overrides from the pop-up menu.
  3. 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.
  4. Select Paste overrides from the pop-up menu.

Remove a style override

  1. In the Properties panel, click the yellow property label for the style override.
  2. Select Remove override in the pop-up dialog.

Remove all style overrides for a media rule

  • For a specific size:
    1. Right-click the Size-specific media rules icon for that size.
    2. Select Remove overrides from the pop-up menu.
  • For a size range:
    1. Hover over the range media rule.
    2. Click the more icon.
    3. Select Remove overrides from the pop-up menu.
Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue