Resizing the viewport

This feature is unavailable for AMPHTML ads.

While you're creating a responsive layout, it's helpful to be able to see how your finished document will look with different screen sizes. There are several ways to adjust the viewport size on the fly when you're in media rules mode. The simplest is by using the viewport resize tool, but you can also click anywhere on a ruler to snap the horizontal or vertical dimension of the viewport to that pixel size.

Although you can resize the viewport in the master rules mode, no rule overrides that are a part of the responsive layout are shown. The master rules mode represents the styling that applies when there are no overrides.

The viewport resize tool 

The Viewport resize tool lets you change the size of the viewport by dragging one of the light gray edges or corners. As the viewport passes horizontal or vertical breakpoints, the styling changes to reflect the active media rules.

To change the viewport size:

  1. Select Media rules (or Landscape/Portrait rules for dual-orientation ads) in the Responsive panel.
  2. Select the Viewport resize tool  in the toolbar.
  3. Drag one of the light gray control handles on the sides or corners of the viewport bounding box. Press the Shift key while dragging to maintain the original aspect ratio.

Alternatively:

Click anywhere on a horizontal or vertical ruler within a range to snap the viewport to that location.

Viewport resize tool options

The viewport controls on the tool options bar let you set the exact size of the viewport, and flip between portrait and landscape views. You can also set the viewport to typical ad or device sizes, or save custom viewport sizes for future use.

To change the viewport size from the tool options bar:

  1. Select the Viewport resize tool  in the toolbar.
  2. Optionally, select the Constrain aspect ratio button to keep the same aspect ratio.
  3. Change the width and height values to change the size of the viewport.

To toggle between portrait and landscape mode:

  1. Select the Viewport resize tool  in the toolbar.
  2. Click the Flip orientation button  in the tool options bar. The width and height values will reverse.

To choose a specific size:

  1. Select the Viewport resize tool  in the toolbar.
  2. Select the size you want from the Presets dropdown in the tool options bar.

To save a custom size:

  1. Select the Viewport resize tool.
  2. Set the viewport to the size you want to save.
  3. Click the Add custom viewport size button in the tool options bar.
Was this article helpful?
How can we improve it?