Add breakpoints and manage ranges

Breakpoints set the boundaries for style changes in your document. A range is the space between two breakpoints. Google Web Designer helps you keep track of horizontal and vertical ranges in your ad by showing each range as a differently colored bar along the rulers, and as a numeric range in the Responsive panel. Each rectangle where different ranges intersect is represented by its own style. You can adjust a range by moving the breakpoints, or remove ranges entirely.

When Media rules are active, the rulers show the defined ranges, the breakpoints, and the range that you're currently editing.

Responsive Layout: Advanced Techniques

Adding breakpoints

To add a breakpoint directly on the rulers:

1. Make sure Media rules (or Landscape/Portrait rules for dual-orientation ads) is selected in the Responsive panel.
2. Right-click on either the horizontal or vertical ruler where you want to add a breakpoint.
3. Choose Add breakpoint from the pop-up menu.

To add a breakpoint in the Responsive panel:

1. Make sure Media rules (or Landscape/Portrait rules for dual-orientation ads) is selected in the Responsive panel.
2. Change the viewport size to the point where you'd like the styles to change
3. Click the Add breakpoint button at the bottom of the Responsive panel.
4. Choose Width breakpoint or Height breakpoint from the pop-up menu. A breakpoint will be added that corresponds to the appropriate edge of the viewport.

Moving breakpoints

To change a breakpoint:

In the Responsive panel, select Media rules or Landscape/Portrait rules for dual-orientation ads.

• Drag the breakpoint marker on the ruler to a new location.
• Click the breakpoint value in the Media rules pane of the Responsive panel, then drag to the left or the right to decrease or increase the value. You can also enter the new numeric value.

Deleting ranges

To delete a range:

Make sure Media rules (or Landscape/Portrait rules for dual-orientation ads) is selected in the Responsive panel, then either:

• Right-click the range on the ruler that you want to delete, then choose Delete selection from the pop-up menu.
• Select the range in the Media rules pane of the Responsive panel, then click the Delete button at the bottom of the panel.

Creating style overrides

When you add a breakpoint, you create a separate set of styles for each rectangular area defined by the breakpoints. For example, if you have one vertical and one horizontal breakpoint, you create four sets of style. Once your breakpoints are set, you can style the elements for each however you wish. Anything defined by CSS can be changed in each style set, including animation.

Removing style overrides

When you make a change to a style in a responsive mode, it overrides the default style set in the Master rules. When a master style has been overridden, the property label is highlighted.

To remove an override:

1. Make sure Media rules (or Landscape/Portrait rules for dual-orientation ads) is selected in the Responsive panel.
2. Click the property label for the style override you want to remove. The override window will appear.
3. Click Remove override at the bottom of the window.