Manage media rules and overrides

To work with media rules:

1. Open the Responsive panel and make sure the Responsive layoutbox 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 documentin 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 editicon.
3. Enter the new dimensions.

Delete a custom size

1. Hover over the size that you want to delete.
2. Click the deleteicon.

Media rules for size ranges

Manage range media rules

For a visualization of your range media rules, click the Manage range media rulesbutton in "Range media rules" section of the Responsive panel's "Sizes and ranges" tab. You can also click the Morebutton 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 editicon.
  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 Shiftkey 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 Overridestab. 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 Responsivepanel'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 Propertiespanel; in the timeline if animation was changed; or in the Textpanel if the text content or text fitting settings were changed. 

Sizes with overrides display the Size-specific media rulesicon 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 Responsivepanel.
   • To copy overrides for a size range:Hover over the size range in the Responsivepanel and click the Moreicon that appears.
2. Select Copy overridesfrom the pop-up menu.
3. Do one of the following:
   • To paste overrides to a specific size:Right-click the size in the Responsivepanel.
   • To paste overrides to a size range:Hover over the size range in the Responsivepanel and click the Moreicon that appears.
4. Select Paste overridesfrom the pop-up menu.

Remove a override

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

Remove all overrides for a media rule

• For a specific size:
  1. Right-click the Size-specific media rulesicon for that size.
  2. Select Remove overridesfrom the pop-up menu.
• For a size range:
  1. Hover over the range media rule.
  2. Click the moreicon.
  3. Select Remove overridesfrom the pop-up menu.