Join David Powers for an in-depth discussion in this video Clearing columns of uneven length, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- Bootstrap columns are floated left,…and since columns are rarely of equal length,…you get this sort of problem…where this longer column is preventing this subsequent one…from moving all the way across to the left.…This situation arises when there isn't sufficient space…for all nested columns to sit alongside each other…inside their parent row.…To fix this problem, you need to clear the float…using Bootstrap helper classes at the appropriate point.…In our layout, on medium and large devices,…the columns in the highlight section…are arranged three abreast, like this.…
But on small devices, they're only two abreast.…So, let's deal with the layout for small devices first.…Go to the Visual Media Queries bar…and click just to the right of 650 pixels…and that gives us the layout for small devices,…and if we scroll down,…actually, there's no problem here at the moment,…but there would be a problem…if you have columns of different lengths.…To clear the float, you need to insert an empty div…after each column on the right…
- 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.