Resize the viewport

When you're creating a responsive layout , it's helpful to see how your document looks in different viewport sizes while you're working on it.

Resize the viewport freehand with the mouse

This method will let you see changes in percentage-based elements, but not style rules.

1. Select Edit default rulesin the Responsivepanel. A border appears around the viewport.
2. Drag one of the light gray handles on the viewport border.
   • Press Shiftwhile dragging to maintain the original aspect ratio.
   • If you don't see the handles, toggle them by selecting View> Responsive> Viewport resize handlesin the top menu.

Select a specific viewport size

Use one of the following methods:

• Select one of the sizes listed in the Responsivepanel.
  
• If the size you want isn't listed, click Add custom sizeat the bottom of the list and enter the dimensions you want.

Fit the viewport into a size range

1. Select one of the range media rules listed in the Responsivepanel. If the viewport doesn't fit into the selected size range, 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 Shiftwhile dragging to maintain the original aspect ratio.
   • If you don't see the handles, toggle them by selecting View> Responsive> Viewport resize handlesin the top menu.

---