Book Image

Responsive Web Design by Example : Beginner's Guide

By : Thoriq Firdaus
Book Image

Responsive Web Design by Example : Beginner's Guide

By: Thoriq Firdaus

Overview of this book

Table of Contents (16 chapters)
Responsive Web Design by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – enhancing the footer section appearance with CSS


Perform the following steps to enhance the footer style:

  1. Adjust the footer font, color, and the margin, as follows:

    .blog-footer {
      background-color: #ecf0f1;
      padding: 60px 0;
      font-family: "Varela Round", Arial, sans-serif;
      margin-top: 60px;
    }
    .blog-footer,
    .blog-footer a {
      color: #7f8c8d;
    }
  2. The footer contains social media links. Let's adjust the styles that encompass the margin, padding, alignment, colors, and whitespace, as follows:

    .social-media {
      margin: 0 0 30px;
    }
    .social-media ul {
      margin: 0;
      padding-left: 0;
    }
    .social-media li {
      margin: 0 8px 10px;
      list-style: none;
    }
    .social-media li,
    .social-media a {
      font-size: 18px;
    }
    .social-media a:hover {
      color: #333;
    }
  3. Set the margin-top out of the copyright container.

    .copyright {
      margin-top: 0;
    }
  4. Align the footer content to the center, as follows:

    .social-media,
    .copyright {
      text-align: center;
    }

What just happened?

We have just styled the footer section...