Search
Clear search
Close search
Google apps
Main menu
true

Resizing the viewport

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:

  1. Make sure Media rules (or Landscape/Portrait rules for dual orientation ads) is selected in the Responsive panel
  2. In the tools panel, click the viewport resize tool
  3. Drag one of the control handles on sides or corners of the viewport bounding box
  4. 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 custom viewport sizes for future use.

To change the viewport size from the tool options bar:

  1. Make sure 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 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 the viewport resize tool is selected.
  2. Select the size you want from the viewport size dropdown.

To save a custom size:

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