From the course: Dreamweaver CC Essential Training

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add a media query

Add a media query - Dreamweaver Tutorial

From the course: Dreamweaver CC Essential Training

Start my 1-month free trial

Add a media query

“

- [Instructor] In the early days of developing responsive websites, it was common to set breakpoints for media queries based on specific devices, such as the iPhone or iPad. But there are so many different screen sizes these days, it's better to set breakpoints and media queries according to the needs of the layout. In this exercise, we'll set a new breakpoint and move some styles to the new media query. At the moment the style sheet attached to this page contains only one media query, there it is in the @Media pane, it's min width 680 pixels. So, in other words, it applies different styles at a minimum screen width of 680 pixels. To see what the page will look like at 680 pixels wide, click the Visual Media Query bar just to the right of 680 pixels, and Live View resizes to that size. And immediately we can see a problem there, the icons in the Navigation Bar, most of them are really bunched up tight against the text, and in the last one it's actually behind the text, so obviously…

Contents