Delete media queries, View the code for media queries, Responsive design using fluid grid layouts – Adobe Dreamweaver CC 2015 User Manual
Page 171: Using fluid grid layouts
164
Layout and design
Last updated 6/3/2015
4
In the pop-up that appears, one of the media query conditions (based on your choice) is prepopulated with the
current position of the scrubber. If you need both min and max conditions, specify the required value. Then, select
a CSS source in which the media query must be added.
If you choose to create a new CSS file, another pop-up appears. Specify the name and the path of the new CSS file
and click OK.
To undo, press Ctrl+Z (Win) or Cmd+Z (Mac).
Delete media queries
1
Right-click the corresponding Visual Media Query bar.
2
Click Delete and then click the media query that you want to delete.
3
Click OK to confirm that you want to delete all the media queries and the associated selectors.
To undo, press Ctrl+Z (Win) or Cmd+Z (Mac).
View the code for media queries
1
Right-click the required Visual Media Query bar and hover your mouse on Go To Code.
A list of all media queries in that particular breakpoint range along with the files in the which they are declared
appears.
2
Click the required media query to navigate to the corresponding code in Code View.
If the Code View is not visible, the document is switched to Split view to display the code.
Responsive design using fluid grid layouts
The layout of a website has to respond and adapt to the dimensions of the device on which it is displayed (responsive
design). A fluid grid layout provides a visual way to create different layouts corresponding to devices on which the
website is displayed.
For example, your website is going to be viewed on desktops, tablets, and mobile phones. You can use fluid grid layouts
to specify layouts for each of these devices. Depending on whether the website is displayed on a desktop, tablet, or
mobile phone, the corresponding layout is used to display the website.
More info:
Note: Inspect mode is not available for Fluid Grid Layout documents.
More Help topics
Using fluid grid layouts
Watch this video tutorial to learn how to use fluid grid layouts:
.