Operation Manual

171
Layout and design
Last updated 11/30/2015
Switch between breakpoints
To view your page in a specific size (breakpoint), click the corresponding media query bar. The document will snap to
the breakpoint.
Alternatively, you can drag the scrubber to the required breakpoint.
To resize the view to the size of the Dreamweaver document window, do one of the following actions:
• Double-click anywhere in the grey area at the right of the document where you see the text 'Double Click To Fit
Width'. If you don't see the grey area, drag the scrubber to the left.
• Select the Full Width option in the drop-down list at the bottom of the document window.
If you do not see this option, drag the scrubber to decrease the size of the web page.
Edit media queries visually
1 Click the Visual Media Query bar that corresponds to the media query that you want to edit.
Resize handles appear. For media queries that have both min and max-width values, resize handles appear on both
the sides of the bar.
2 Drag the handles to the required size.
The media queries are automatically updated with the new min-width and/or max-width values. A notification is
displayed to indicate that the media query was successfully edited. If there are multiple media queries that
correspond to the visual media query bar, all the media queries are updated. The number of media queries that were
updated is displayed along with the success message.
To undo, press Ctrl+Z (Win) or Cmd+Z (Mac).
Alternatively, you can double-click the breakpoint values to type in the values using your keyboard.