Manage media rules and overrides

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

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.

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. 

       

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.