问响应式CSS问题

EN

                       /***********************
 GENERAL
 ***********************/
 a {
 text-decoration: underline;
 }

 a:hover {
 text-decoration: underline;
 }

 img {

max-width: 100%;
}

 body {
/*font-family: 'Fabrica', 'Courier New';*/
font-family: 'Open Sans', sans-serif;
background-color:#e6e9ed;
color: #434a54;
}

#wrapper{
max-width:960px;
margin: 0 auto;
background-color: #f5f7fa;
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating content*/
line-height: 1.8em;
}
#wrapper img {
border-radius:5px 20px 5px;
}

#wrapper p {
text-indent: 2.5em;
}

#banner {
margin-left: auto;
margin-right:auto;
padding: 0;
display:block;
clear:both;
}

#content {
padding:20px 40px;
padding-bottom:50px;
}

h1, h2, h3 {
font-family: 'Droid Serif', serif;
}

.selected {
 color:#0B108C;
text-decoration: none;
}


  /***********************
  HEADER - Top image strip above banner
  ***********************/
 #logo {
 text-align:right;
max-height:100%;
max-width:100%;
padding: 10px 0px 10px 30px;
}

#header {
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: top;
margin: 0 auto;
max-width:960px;
}

/*Commented out for testing new header technique
#header {
margin-left: auto;
margin-right: auto;
padding: 0;
display: block;
clear: both;
font-family: 'Fabrica', Arial;
}  

*******/

/***********************
NAVIGATION - Main site navigation
***********************/
nav{
 background-color:#4888dc;
text-align:center;
color:blue;
max-width:960px;
margin: 0 auto;
text-align:center;
font-size:1.2em;
}
nav ul{
list-style:none;
margin:0 10px; /*Can be change later on in the design if it doesn't work*/
}
nav li{
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block 
  pushes other items out of the page. Inline block maintains width and 
  height but is in line with other images*/
display:inline-block;
list-style:none;
padding: .4em 1.5em;
}
nav a {
font-weight: 800;
}

nav a:visited, nav a:link {
color:#f5f7fa;
text-decoration: none;
}

nav a:hover {
color:#0B108C;
text-decoration: none;
}


nav ul li a.selected { /*Highlights current page for users*/
color:#0B108C;
}


 /**********************
 FOOTER
 **********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
text-decoration:none;
}

footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
 }


 /**********************
 RIGHT SIDE OF FOOTER
 **********************/
#footer-right {
float:right;
margin-right:15px;
}

 .social-icon {
  display:inline-block;
  width:24px;
  height:24px;
  margin-bottom:22.7px; /*controls height of "follow us" in footer*/
  padding:1px;
  border-radius: 20%;
  }

/**********************
LEFT SIDE OF FOOTER
**********************/
#footer-left {  
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}

#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}

#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px; 
display:inline-block;
font-family: 'Open Sans', sans-serif;
} 

 /***********************
 CONTENT TEMPLATE - Content template for all other pages
 ***********************/

 /*Responsive.css*/

 /*This is the placeholder for responsive CSS that we will implement for mobile design*/

/* Smartphones ----------- */
@media screen and (max-width: 519px){ 
/* Styles */

#content{ 
float:none;
padding:0;
width: auto;
}

img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}

body{
float:left;
font-family: 'Fabrica';
}

 #logo {
 margin-right:auto;
 max-width: 100%;
 height: auto;
 padding: 0;
 }

#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}

h1, h2, h3 {
font-family: 'Fabrica';
} 

nav{
position: relative;
min-height: 40px;
}

nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

nav ul:hover li{
display: block;
margin: 0 0 5px;
}

nav a:hover {
display:block;
}

nav li{
display:none;
margin:none;
}

#banner{
display: none;
}

footer{
font-family: 'Fabrica';
float:left;
}
}

/*Ipads and Tablets*/
@media screen and (min-width:520px) and (max-width: 959px) and (orientation: landscape){
footer{
font-family: 'Fabrica';
float: left;
}

body{
font-family: 'Fabrica';
}

#primary {
width: 55%;
float: left;
padding:10px;
}

#secondary {
width: 30%;
float: right;
padding:10px;
}
}

/* Desktops and laptops ----------- */
@media screen and (min-width: 1200px){
/* Styles */
#primary {
width: 55%;
float: left;
padding:10px;
}

#secondary {
width: 30%;
float: right;
padding:10px;
 }
}

/*************************************
TWO COLUMN LAYOUT

Will target anything larger than average smartphone.
This is helpful for normal sized tablets, very large smartphones, and very small desktop windows.
***************************************/
@font-face {
font-family: 'Fabrica';
font-style: normal;
font-weight: 100;
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf');
}