Time for action – adjusting the standard layout for tablets

We'll start with devices that range from 480 pixels wide up to 800 pixels. This range includes the iPad when it's held in portrait orientation:

  1. Add the following code to your media query:
    @media (min-width: 480px) and (max-width: 800px) {
  header{
    height: 100px;
  }
  #mainNav{
    top:100px; 
    width: 300px;
  }
  #mainNav li{
    float:none;
    clear:both;
  }
    #container2{
    background-position: 70% -90px;
  }
  .home article.post h2{
    font-size: 150%; 
    margin-bottom: 10px;
  }
  .home article.post .entry-content,article.post .entry-meta, article.post a.more{
    display:none;
  }
  .content.left.two-thirds, .sidebar.right.third{
    float:none; 
    clear:both; 
    margin: 0 auto; 
    width:98%;
  }
  .sidebar div{
    width: 30%; 
    margin: 1.2%; 
    float:left;
  }
  .home .content.left.two-thirds{
    margin-top:180px;
  }
}
  2. Save your stylesheet.

What just happened?

We added some styling to adjust the layout on tablet devices. Specifically:

  • We removed the "tab" floats of our #mainNav list items li and set them to list vertically
  • We changed some of the font sizes of our titles
  • We hid our article content, only displaying the titles
  • We turned off our .sidebar element's right float
  • We set each div in the .sidebar to float: left of each other, creating a three-up box spread under our main article headlines

The end result looks like the following screenshot:

What just happened?

Setting up the small screen view

We're now ready to set our small screen view up, which will target smartphones and other smaller devices in portrait orientation.

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

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