Search
Clear search
Close search
Google apps
Main menu

Add breakpoints and manage ranges

Breakpoints set the boundaries for style changes in your document. You can add breakpoints two ways. You can either add them directly in the rulers, or size the viewport for where you want the style to change, and then add a new breakpoint using the Responsive panel.

A range is the space between two breakpoints. Google Web designer helps you keep track of the different horizontal and vertical ranges in your ad by showing each range as a different colored bar above the rulers, and as range in the Responsive panel. Each rectangle where different ranges intersect is represented by its own style. You can change the shape of a range by changing the breakpoints, or remove the range 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 to 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. Drag the viewport 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 move a breakpoint

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

  • Drag the breakpoint in the ruler
  • Click the breakpoint value in the Media rules pane of the Responsive panel, and drag to the right to increase the value, or to the left to decrease it

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 on the range you want to delete, then choose Delete selection from the pop-up menu
  • Click 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 create breakpoints, you’re making a separate style for each rectangular area that the breakpoints define. For example, if you use one vertical and one horizontal breakpoint, you’ll be creating four styles. Once your breakpoints are set, you can style the elements however you wish. Anything that's definable by CSS can be changed for each style, 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. You can quickly see when a master style has been overridden because the property label will be 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 appears.
  3. Click Remove override at the bottom of the window
Was this article helpful?
How can we improve it?