Time for action – setting up our small screen layout

Here our media query will be a little different, only applying to screens (the other queries will affect print layout as well).

  1. In your final media query add the following CSS rules and changes:
    @media only screen and (min-width: 320px) and (max-width: 480px) {
  header{
    height: 70px;
  }
  #mainNav{
    top:70px; 
    width: 220px;
  }
  #mainNav li{
    float:none;
    clear:both;
  }
  #mainNav li a{
    font-size: 100%; 
    padding: 10px
  }
  .home article.post h2{
    font-size: 120%; 
    margin-bottom: 10px; 
    padding-left: 50px;
  }
  .home article.post .entry-content,article.post .entry-meta, article.post a.more{
    display:none;
  }
  .home article.post a.comments{
    position:absolute; 
    margin-top: -55px;
  }
  .content.left.two-thirds{
    margin-top:150px;
  }
  .soc {
    text-indent: -5000em;
  }
}
  2. Save your stylesheet.

What just happened?

We've added some styling to improve the layout on small screens. In particular:

  • We shortened up our header even more and tightened up the width of our #mainNav
  • We reduced font sizes in our #mainNav and titles
  • We reduced the margin-top of our .content div

The most notable thing that happens is actually handled by default in our layout-core.css. All left and right floats are turned off, cleared on both sides, and all percentage widths are set to 100%. This makes every div laid out in our phone view push edge to edge. The result looks like the following screenshot:

What just happened?
..................Content has been hidden....................

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