Join David Powers for an in-depth discussion in this video Adjusting the layout and styling the feature section, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- The Features section that we've just created…consists of a row with four columns,…and on a small device, they'll be stacked…vertically like this.…Now, this doesn't look too bad.…But let's see what happens if we go to…a large device.…I'm going to collapse the panels here,…and then double-click the gray area,…so we go larger than 1200 pixels.…And everything is way, way too wide.…So we need to adjust the layout…for both medium and large devices.…
So, let's start with medium devices.…That means clicking just to the right of 960 pixels…in the Visual Media Queries bar.…And everything is indeed too wide.…Scroll up, click inside the first column,…that contains the heading, and then,…drag the resize column handle to the left,…the width of four columns.…And then, we need to center that…by selecting the offset column handle,…and dragging two columns width…to the center.…
Do the same with the image,…resize column and again, the width of four columns,…and offsetting the width of two column.…And then we need to deal with the…text down at the bottom.…
- 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.