Resize the viewport

When you're creating a responsive layout, it's helpful to see how your document looks on different-sized screens. Google Web Designer lets you adjust the viewport so that the styles you specified for that size and orientation apply to your document on the stage.

If Master rules is selected in the Responsive panel, only universal styles apply. To activate styles that depend on the viewport:

  • In the Responsive panel, select Media rules on the Media queries tab.
  • If you have orientation-specific media rules, select Landscape rules or Portrait rules in the Responsive panel.

Resize the viewport freehand with the mouse

  1. Select the Viewport resize tool in the toolbar. A border appears around the viewport.
  2. Drag one of the light gray handles on the viewport border.
    • Press Shift while dragging to maintain the original aspect ratio.

Specify the exact viewport size

  1. Select the Viewport resize tool in the toolbar.
  2. To keep the same aspect ratio, select the Constrain aspect ratio button on the tool options bar at the top.
  3. Change the width and height values in the tool options bar.

Fit the viewport into a size range

Click the horizontal or vertical ruler within a colored range.

Select a preset viewport 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 at the top.

Add a custom preset viewport size

  1. Select the Viewport resize tool in the toolbar.
  2. Set the viewport to the size you want to save.
  3. Click the Add custom viewport size button in the tool options bar at the top. The Presets dropdown now lists the current viewport size under Custom sizes.

Toggle the viewport between landscape and portrait

  1. Select the Viewport resize tool in the toolbar.
  2. Click the Flip orientation button in the tool options bar at the top.

If you have Landscape rules and Portrait rules, you can also change the viewport orientation by selecting the matching set of rules in the Responsive panel.


Previewing multiple viewport sizes

You can view multiple viewport sizes at a glance in your browser by using the All sizes preview mode. This preview mode is only available for responsive documents.

Was this helpful?
How can we improve it?