Beautifying the features list

With icons, titles, and short descriptions, our features section currently looks like the following screenshot in a wide viewport:

Beautifying the features list

We need to enlarge the icons, align the text at the center, and iron out the grid layout.

Let's review the markup structure for the features list:

<section id="features">
  <div class="container">
    <h1>Features</h1>
    <div class="row">
      <div class="features-item col-md-4">
        <span class="icon fa fa-cloud"></span>
        <h2>Feature 1</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. </p>
      </div>
   ...

Note

Each feature with its icon, heading, and paragraph is wrapped in a div tag with two classes: features-item and col-md-4.

With this in mind, let's write the styles we need:

  1. With _page-contents.less opened in your editor, add a new section with a comment for our #features section.
    // Features Section
#features {

}
  2. Now let's focus on the .features-item section by aligning the text at the center, adding padding, providing a set height to keep the floating items from interfering with each other, and increasing the .icon font size to 90px:
    #features {
   .features-item {
    text-align: center;
    padding: 20px;
    height: 270px;
    .icon {
      font-size: 90px;
    }
     }
}
  3. Save the file, compile it to CSS, and refresh the browser. You should see the following result in a medium viewport:
    Beautifying the features list

    That's a great start!

  4. Now let's adapt our features section for small screens. Currently, our .features-item section includes a class of col-md-4. We can shift our small-screen layout to two columns as shown in the following screenshot by adding a class of col-sm-6:
    Beautifying the features list
  5. And then, of course, they'll arrange themselves in a single column for extra-small screens.
  6. Unfortunately, at the upper range of extra-small screens, 500px to 767px, the full-width layout allows the descriptive text to range too wide.
    Beautifying the features list
  7. We can fix this by adding a media query within which we set a maximum width on the .features-item section and apply Bootstrap's .center-block() mixin:
    #features {
   .features-item {
      ...
      @media (max-width: @screen-xs-max) {
          max-width: 320px;
      .center-block();
       }
   }
}

    Note

    The .center-block() mixin is found in the mixins.less file in the bootstrap folder. It applies auto left and right margin to the element.

  8. With these lines in place, our .features-item elements retain their desired dimensions across all viewports!
    Beautifying the features list

At this point, we have satisfied our client's demands for this section of her website! We're ready to move on to the customer reviews.

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

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