- The final section of content will be laid out as three tall columns…on all devices, except extra small ones.…In other words, those less than 650 pixels wide.…To prevent the content from becoming too wide…on very large devices…I'm going to use the same technique as with…the highlight section…earlier in this chapter.…All of these articles in the highlight section,…are in a row that is nested inside this single column…of an outer row.…So on large devices, this parent column…constrains the width of the inner row.…
So thats the technique we are going to be using.…Let's get to work.…Make sure the document window is at least…1200 pixels wide and then select the feature section.…Because we can't see the bottom of feature section…on my screen,…the duplicate row and add new row icons have appeared…at the top right.…So just click the icon for add new row.…That inserts a new row and leaves it selected.…So let's give it an ID by clicking this plus button here.…
And the ID I will give it will be Articles.…[inaudible] be in yosemite.css…
- 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.