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.

Resize the viewport freehand with the mouse

  1. Select Edit default rules in the Responsive panel. 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.
    • If you don't see the handles, toggle them by selecting View > Responsive > Viewport resize handles in the top menu.

Select a specific viewport size

Use one of the following methods:

  • Select one of the sizes listed in the Responsive panel.
  • Click Add custom size and enter the dimensions you want.

Fit the viewport into a size range

  1. Select one of the range media rules listed in the Responsive panel. The viewport automatically resizes to the maximum width and height in that range.
  2. Drag one of the light gray handles on the viewport border. You can only resize the viewport within the selected range, which is indicated on the rulers by colored bars.
    • Press Shift while dragging to maintain the original aspect ratio.
    • If you don't see the handles, toggle them by selecting View > Responsive > Viewport resize handles in the top menu.

Previewing multiple viewport sizes

You can view multiple viewport sizes at a glance while working on your document by clicking the Responsive preview  button in the Responsive panel. Any sizes with the Preview size  box checked appear in the preview panel. This preview mode is only available for responsive documents.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue