Adobe Certified Professional Dreamweaver: Layout and Responsive Design

Modern layout tools

Dreamweaver supports Flexbox and CSS Grid through the CSS Designer and Live view. Candidates should understand Flexbox's main axis vs. cross axis, justify-content (main axis) vs. align-items (cross axis), and flex-wrap. For Grid, know grid-template-columns, fr units, and gap. Older layout methods - floats and absolute positioning - still appear in questions about legacy pages; floats require clearing, and absolute positioning removes an element from normal flow.

Responsive fundamentals

Responsive design rests on three pillars: a viewport meta tag (width=device-width, initial-scale=1), fluid grids (percentages, fr, minmax), and media queries. Media queries use min-width (mobile-first, progressive enhancement) or max-width (desktop-first). Candidates must know that a page without the viewport meta renders at a virtual desktop width on phones.

Traps

• Mobile-first ordering: base styles target small screens; min-width queries add complexity upward. Mixing min-width and max-width carelessly creates overlapping or unreachable ranges.
• Fixed widths on containers break fluid layouts; max-width: 100% on images prevents overflow.
• Media query placement: later rules of equal specificity win, so query order matters.
• Flexbox axis confusion: justify-content is main axis, not vertical.

Rule of thumb

Design mobile-first: write base CSS for the narrow layout, then layer min-width queries at breakpoints where content - not a specific device - breaks. Test by resizing Live view, not by guessing device names.