Join David Powers for an in-depth discussion in this video Using CSS Inspect with Device Preview, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- 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 although we're using absolute positioning…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.