From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Clearing columns of uneven length - Dreamweaver Tutorial
From the course: Dreamweaver CC 2015: Responsive Design with Bootstrap
Clearing columns of uneven length
- 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Resizing columns4m 57s
-
Duplicating columns with placeholder text6m 28s
-
Using Paste Special in Live View5m 40s
-
Clearing columns of uneven length6m 29s
-
Creating the feature section7m 40s
-
Adjusting the layout and styling the feature section8m 9s
-
Adding more content5m 30s
-
Adding the page footer7m 6s
-
Hiding elements3m 19s
-
Adding extra pages4m 44s
-
-
-