From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Using CSS Inspect with Device Preview - Dreamweaver Tutorial
From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap
Using CSS Inspect with Device Preview
- Continuing from the previous video, let's see how Device Preview lets you identify the cause of layout problems on different devices using Dreamweaver's CSS Inspect Mode. So, I'm just going to open the Device Preview pop-up and we're connected to both an iPhone and to an iPad. What I want to do is to inspect it on the iPhone. So, next to iPhone we've got this little Inspector Debug icon. If I click that, Dreamweaver's Live View resizes to the same size as my device. We've already entered Inspect Mode. We can see here that Abundant Wildlife is selected in blue. That's an element and it's got orange on the top and the bottom. Orange highlighting indicates margins and if I just move slightly, it then highlights the whole of that article and we can see that the article itself has got some padding on the right-hand side. That's shown there in green. If I go up to this Yosemite, the heading there, we can see that there's margin on the top and the bottom of the heading and that's why…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.