title: Trying to get Media Queries to work on Portrait OR Landscape
body: <p>here it is, this is the css, and the media queries is down below, just search @media and it will find it.</p>
  
  <p>Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.</p>
  
  <pre><code>body {background-image:url('../images/space1.jpg');
      background-repeat:no-repeat;
      background-size:200%;
  }
  
  body {
      color:white;
  }
  
  a, a:visited { 
      color:#3399FF; text-decoration:none;
  }
  
  div.header{
      text-align:right;
      font-size:200%;
  }
  
  div.header1 {
      text-align:right;
      font-size:125%;
  }
  
  div.logo{
      margin-top:-40px;
  }
  
  #nav{
      width:85%;
      height:3%;
      font-size: 26px;
      font-weight: bold;
      background-color: ;
      border-radius: 8px;
      text-align: center;
      margin: 0 auto;
      position:absolute;
      top:100px;
      left:120px;
  }
  
  #nav ul {
      height: auto;
      padding: 0px 0px;
      margin: 0px;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      display: inline-block;
  }
  
  #nav li { 
      display: inline-block;
      padding: 20px; 
      margin-left: auto;
      margin-right: auto;
  }
  
  #nav a {
      text-decoration: none;
      color: :#3399FF;
      padding: 8px 8px 8px 8px;
  }
  
  #nav a:hover {
      color: #000000;
      background-color: #FFF;
  
  li:hover ul { 
      display: block; 
  }
  
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
  }
  
  div.qui {
      text-align:center;
      font-size:200%;
      text-decoration:underline;
  }
  
  div.specs {
      text-align:center;
      font-size:175%;
  }
  
  ul.qui {
      text-align:center;
      font-size:150%;
      list-style-type: none;
  }
  
  .images {
      overflow: hidden;
  }
  
  .images img {
      float: left;
      margin: 0px;
  }
  
  div.1 {
    text-align: center;      
  }
  
  .left {
      float: left;
      margin-left:20%;
      padding:10px;
      border:3px solid #585858 ;
  }
  
  .right {
      float: right;
      margin-right:20%;
      padding:10px;
      border:3px solid #585858 ;
  }
  
  p.v {
      text-align:center;
  }
  
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  
      div.header{
          text-align:right;
          font-size:120%;
      }
  
      div.header1 {
          text-align:right;
          font-size:85%;
      }
  
      div.logo{
          margin-top:-40px;
      }
  
      div.logo {
          img
          height:150px;
          width:320px;
  }   
  
      #nav{
          width:85%;
          height:3%;
          font-size: 30%;
          font-weight: bold;
          background-color: ;
          border-radius: 8px;
          text-align: center;
          margin: 0 auto;
          position:absolute;
          top:100px;
          left:120px;
      }
  
      #nav ul {
          height: auto;
          padding: 0px 0px;
          margin: 0px;
          background-color: #f2f2f2;
          border-bottom: 1px solid #ccc; 
          display: inline-block;
      }
  
      #nav li { 
          display: inline-block;
          padding: 5px; 
          margin-left: auto;
          margin-right: auto;
      }
  
      #nav a {
          text-decoration: none;
          color: :#3399FF;
          padding: 8px 8px 8px 8px;
      }
  
      #nav a:hover {
          color: #000000;
          background-color: #FFF;
  
      li:hover ul { 
          display: block; 
      }
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li:hover &gt; ul {
          display: block;
  }
  
  div.qui {
      text-align:center;
      font-size:200%;
      text-decoration:underline;
  }
  
  div.specs {
      text-align:center;
      font-size:175%;
  }
  
  ul.qui {
      text-align:center;
      font-size:150%;
      list-style-type: none;
  }
  
  .images {
      overflow: hidden;
  }
  
  .images img {
      float: left;
      margin: 0px;
  }
  
  div.1 {
    text-align: center;      
  }
  
  .left {
    float: left;
    margin-left:0%;
    padding:0px;
     border:3px solid #585858 ;
  }
  
  .right {
    float: right;
    margin-right:0%;
    padding:0px;
     border:3px solid #585858 ;
  }
  
  p.v {
      text-align:center;
  }
  
  }
  </code></pre>