Tweaking the columns and their content

Let's fine-tune the blocks of content under the three headings Welcome!, Recent Updates, and Our Team.

First, let's add the arrow-circle icon to the button in each of these three blocks. Recall that we're using Font Awesome for our icon selection.

  1. Visit the Font Awesome documentation at http://fortawesome.github.io/Font-Awesome/icons/.
  2. You'll find the icon that we're after.
    Tweaking the columns and their content
  3. In index.html, add a span tag with the appropriate classes inside each link. Here is the first one, which I've spaced out by adding an extra carriage return between elements.
    <p>
  <a class="btn btn-primary pull-right" href="#">
    See our portfolio <span class="icon fa fa-arrow-circle-right"></span>
  </a>
</p>
  4. Repeat for each link.

You should now have the desired icon in each of the three buttons.

Tweaking the columns and their content

While we're at it, let's add a bit of vertical padding between the carousel and this section of text. Right now, it's pretty tight.

Tweaking the columns and their content

The question that comes up at this point is where best to compose the styles that we'll need for this. Adding extra padding around page content sections will likely be a pretty normal practice for us now and in the future. Let's create a LESS file to hold these and other tweaks to the ordinary contents of pages. (As it happens, we'll need this file for an additional and more important responsive adjustment, so it seems well justified.)

  1. Create a file named _page-contents.less.
  2. Save it in your less folder alongside your other custom less files.
    Tweaking the columns and their content
  3. Comment the file.
    //
// Page Contents
// --------------------------
  4. Then, let's create a sensible class for this purpose and add our desired padding—including some padding for the bottom.
    .page-contents {
  padding-top: 20px;
  padding-bottom: 40px;
}
  5. Save the file.
  6. Add _page-contents.less to the imports in __main.less. I'll add mine in a new section near the bottom of the file, just before the Utility classes, and I'll include a helpful comment for orientation purposes.
    // Other custom files
@import "_page-contents.less";
  7. Save and compile.
  8. Now, let's add the necessary class to our markup. Open index.html and add the class page-contents to the div with the class container, which follows just after the closing div of our homepage-feature carousel.
    </div><!-- /#homepage-feature.carousel -->
<div class="page-contents container">
<div class="row">
  9. Save and refresh your browser. You should see the padding added.

Next, we need to tidy up the narrow-screen view of these blocks. Notice that when viewed in single-column layout, the headings do not clear the floated buttons.

Tweaking the columns and their content

Fixing this is just a little tricky. We might want to add a clearfix to the div containing each of these three blocks. However, that won't work because we need these blocks to float side by side once the viewport width is 768px or up.

This calls for a media query. Recalling that our three-column view begins at the @screen-sm breakpoint, or 768px, let's set a rule to clear floats when the window is one pixel below this breakpoint—which is the purpose of the special breakpoint @screen-xs-max. You'll find these special –max breakpoints just below the other @screen variables in _variables.less.

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

The @screen-xs-max breakpoint is what we need in this case, as it provides a value one pixel narrower than the @screen-sm breakpoint.

Note

Using the @screen-sm-min variable would leave a 1px zone in which the columns would stay approximately a third of width, but would be too wide for the columns to float side by side. This causes the columns to stack on top of each other. Not the result we want. In my testing, this 1px overlap broke the layout on the iPad. So, the @screen-xs-max variable is important!

While we're at it, let's also add some bottom padding to our columns so that they have a bit of extra vertical breathing room when stacked.

Inside our media query, we'll add a CSS2 attribute selector to select all elements with a class that contains col-, so that the same rules will apply to a column of any size:

.page-contents {
...
@media (max-width: @screen-xs-max) {
  [class*="col-"] {
    clear: both;
    padding-bottom: 40px;
  }
}
}

Save, compile, and refresh. The result is much improved!

Tweaking the columns and their content

Much better!

Now, let's move on to the footer!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset