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 – composing style rules for desktop


Perform the following steps to compose style rules for desktop:

  1. Open responsive.css in Sublime Text.

  2. Add the following media query:

    @media screen and (min-width: 640px) {
      // add style rules here
    }

We will add all the style rules in the following steps within this media query. This media query specification will apply the style rules within the viewport width starting from 640 px and up.

  1. Align the blog logo to the left-hand side, as follows:

    .blog-name {
      text-align: left;
      margin-bottom: 0;
    }
  2. Display the list item of the navigation menu, post meta, and social media inline, as follows:

    .blog-menu li,
    .post-meta li,
    .social-media li {
          display: inline;
    }
  3. Increase the post title size, as follows:

    .post-title {
      font-size: 48px;
    }
  4. Also, display the blog pagination links inline, as follows:

    .blog-pagination li,
    .blog-pagination a {
      display: inline;
    }
  5. Put the pagination page indicator in its initial position—inline with the blog pagination link...