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

Using CSS Inspect with Device Preview - Dreamweaver Tutorial

From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap

Start my 1-month free trial

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…

Contents