Manage media rules and overrides

Responsive features are not supported in AMPHTML ads. Video ads, animated GIFs, and image ads can use multi-size layouts.

Responsive Overview - Google Web Designer

Media rules let you override the default styles and other attributes for different viewport sizes. A media rule applies to either a specific size or a size range.

To work with media rules:

1. Open the Responsive panel and make sure the Responsive layout box is checked under the "Sizes and ranges" tab.
2. Select a size or size range in the panel to set overrides for that media rule.

While a media rule is selected, panels and actions are disabled if they can't be limited to a specific size. For example, you can't add new elements or edit events. To make these changes, first select Edit base document in the Responsive panel.

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 in the Sizes section under the "Sizes and ranges" tab. 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 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 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 "Range media rules" section of the Responsive panel's "Sizes and ranges" tab. You can also click the More button 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 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 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.

Overrides

Use overrides to optimize your layout by adjusting properties for different viewport sizes.

Anything defined by CSS can be changed in a media rule, including size, position, visibility, source, and animation. Google Web Designer also allows you to override additional attributes such as image sources, component properties, text content, and text fitting settings. Properties that can't be overridden are disabled when a media rule is selected.

View overrides

Overrides for the currently selected size or size range are displayed in the Responsive panel under the Overrides tab. Each element with an override is listed, along with the properties that have overridden values.

Filter the list of overrides

You can filter the list of overrides using the dropdown at the top of the panel:

• All - Show all overrides.
• Current page - Show overrides for elements on the current page.
• Selection - Show overrides for selected elements.

Manage overrides

Add or change a override

1. Select the media rule in the Responsive panel's "Sizes and ranges" tab. The media rule is highlighted in the panel and displayed in the top left corner of the stage.
2. Make the change that you want.

The label for the overridden property is highlighted in yellow in the Properties panel; in the timeline if animation was changed; or in the Text panel if the text content or text fitting settings were changed. 

       

Examples of yellow override indicators

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 override

1. Click the yellow property label for the override.
   • Most overrides are indicated in the Properties panel.
   • Overrides for animation are indicated in the timeline.
   • Overrides for text content or text fitting settings can be seen in the Text panel.
2. Select Remove override in the pop-up dialog.

Remove all 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.