HTML5 and CSS3: Building Responsive Websites

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 ...