Operation Manual

169
Layout and design
Last updated 11/30/2015
Duplicate rows and columns
Click the row or column that you want to duplicate and then click the duplicate icon ( ) at the lower right corner. The
entire row or column is duplicated along with its contents.
Note: The Add Row or Add Column option duplicates the row or column with classes, but without the content.
Resize and offset columns
Resizing and offsetting columns become imperative especially when you are creating responsive designs for various
viewports.
Resize columns
Click the required column and drag the handle on the right to resize. When you resize a column, the col-*-n class is
added, where * represents the current media query (xs, sm, md, or lg) and n represents the number of columns that it
occupies.
Dreamweaver detects the current screen size and adds the appropriate class. To resize columns to suit specific
viewports, change the viewport size using the options in the lower-right corner or the scrubber. Then resize the
columns as appropriate.
Offset columns
Click the required column and drag the handle on the left to offset the column. The offset is shown as a hashed area.
When you offset the column, the col-*-offset-n class is added, where * represents the current media query (xs, sm, md,
or lg) and n represents the number of columns by which it shifts.
Dreamweaver detects the current screen size and adds the right class. To offset columns to suit specific viewports,
change the viewport size using the options in the lower-right corner or the scrubber. Then, offset the columns as
appropriate.
Visual Media Queries
Media Queries is a CSS3 module that helps you design responsive websites by defining different style rules for different
devices or media types. Based on these rules, content is rendered to adapt to various conditions, such as, screen sizes,
browser window sizes, device sizes and orientation, and resolution.
You can add media queries using the @media rule to your CSS. Or, you can create separate style sheets for different
media types and then call them using the following syntax:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
The browser on a device checks the media query and uses the corresponding CSS file to display the web page.
For more information, see this article.
You can add the media queries by adding the relevant code to your HTML or CSS files. In addition, Dreamweaver lets
you create and manage media queries easily using:
• Visual Media Query bar
• CSS Designer