In this video, learn how to use Inspect mode in Live View to identify what causes unexpected gaps in page layout. Explore how Dreamweaver adds padding at the top or bottom of the page to prevent content from being hidden by Bootstrap fixed navbars when the page first loads, and how the gutter between layout columns pushes content away from the edge of the viewport.
- [Instructor] In the previous video we inserted…a responsive image in a single column row below the navbar,…but between the image and the navbar,…there's this ugly gap.…Also on either side of the image…we've got some white space.…To find out what's causing those gaps,…we need to turn on inspect mode in live view,…that's this bif icon in the common toolbar on the left.…Click that and then start mousing over,…and the various elements are highlighted showing…where we've got padding and margins.…
And green overlay indicates padding,…I'm currently over that gap and we've got green…going all the way up to the top of the page.…And if you look down at the bottom left,…there's a tool tip which indicates that…that padding has been applied to the body,…so we'll need to fix that on the body.…And if we mouse over the right hand side,…there's also green overlay there.…We don't see the green overlay on the left hand side…because that's hidden by the ruler…but that tool tip indicates that the padding is on…the div with the class of col-12, in other words,…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 32m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- 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.