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.

Using the viewport resize tool

The viewport resize tool lets you resize the viewport by dragging it to a new size. As the viewport passes horizontal or vertical breakpoints, the styling changes to reflect the active media rules.

To change the viewport size, make sure that Media rules (or Landscape/Portrait rules for dual orientation ads) is selected in the Responsive panel, then:

  1. In the tools panel, click the viewport resize tool.
  2. Drag one of the control handles on the sides or corners of the viewport bounding box.
  3. Optionally, hold the shift key while dragging to maintain the original aspect ratio of the selection.

Alternately:

Click anywhere on a horizontal or vertical ruler 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 customised viewport sizes for future use.

To change the viewport size from the tool options bar:

  1. Make sure that the viewport resize tool is selected.
  2. Change the width and height values to change the size of the viewport.
  3. Optionally, click the link button to keep the same aspect ratio while changing size.

To toggle between portrait and landscape mode:

  1. Make sure that the viewport resize tool is selected.
  2. Click the Flip orientation button. The width and height values will reverse.

To choose a specific size:

  1. Make sure that the viewport resize tool is selected.
  2. Select the size that you want from the viewport size drop down.

To save a customised size:

  1. Make sure that the viewport resize tool is selected.
  2. Set the viewport to the size that you want to save.
  3. Click the Add customised viewport size button.
Was this article helpful?
How can we improve it?