With our meta viewport problem fixed, no browsers are now zooming the page, so we can set about fixing the design for different viewports. In the CSS, we'll add a media query for devices such as tablets (for example, iPad) that have a viewport width of 768 pixels in portrait view (as the landscape viewport width is 1024 pixels, it renders the page fine when loaded in Landscape view).

@media screen and (max-width: 768px) {
  #wrapper { 
    width: 768px; 
  }
  #header,#footer,#navigation {
    width: 748px; 
  }  
}

Our media query is re-sizing the width of the wrapper, header, footer, and navigation elements if the viewport size is no larger than 768 pixels. The following screenshot shows how this looks like on our iPad:

I'm actually quite encouraged by that. The content now fits on the iPad display (or any other viewport no larger than 768 pixels) with no clipping. However, we need to fix the Navigation area as the links are extending off the background image and the main content area is floating below the sidebar (as it's too wide to fit in the available space). Let's amend our media query in the CSS, as demonstrated in the following code snippet:

@media screen and (max-width: 768px) {
  #wrapper { 
    width: 768px;
  }
  #header,#footer,#navigation {
    width: 748px; 
  }  
  #content,#sidebar { 
    padding-right: 10px; 
    padding-left: 10px; 
    width: 728px;
  }
}

Now the sidebar and content area are filling the entire page and are nicely spaced with a little padding on either side. However, this isn't very compelling viewing. I want the content first and the sidebar second (by it's nature it's a secondary area of interest). I've made another schoolboy error here, if I'm attempting to approach this design with a truly responsive design methodology.