Adobe Dreamweaver CC 2015 - Manual (Page 168)

161
Layout and design
Last updated 6/3/2015
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:
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
The basic difference between these two methods is the visual aspect. If you prefer to code and then view the changes in
Live view, use the CSS Designer. If you prefer to visualize your page at different breakpoints and simultaneously make
design changes, Visual Media Query is a better bet.