title: How to set portrait and landscape media queries in css?
body: <p>Here is my media query:</p>
  
  <pre><code>@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
    .hidden-desktop {
      display: inherit !important;
    }
    .visible-desktop {
      display: none !important ;
    }
    .visible-tablet {
      display: inherit !important;
    }
    .hidden-tablet {
      display: none !important;
    }
  }
  
  @media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
    .hidden-desktop {
      display: inherit !important;
    }
    .visible-desktop {
      display: none !important ;
    }
    .visible-tablet {
      display: inherit !important;
    }
    .hidden-tablet {
      display: none !important;
    }
  }
  @media screen and (max-device-width: 767px) and (orientation: portrait) {
    .hidden-desktop {
      display: inherit !important;
    }
    .visible-desktop {
      display: none !important;
    }
    .visible-phone {
      display: inherit !important;
    }
    .hidden-phone {
      display: none !important;
    }
  }
  @media screen and (max-device-width: 767px) and (orientation: landscape) {
    .hidden-desktop {
      display: inherit !important;
    }
    .visible-desktop {
      display: none !important;
    }
    .visible-phone {
      display: inherit !important;
    }
    .hidden-phone {
      display: none !important;
    }
  } 
  </code></pre>
  
  <p>But in tablet, If it is in landscape mode, this div is showing</p>
  
  <pre><code> .visible-tablet {
      display: inherit !important;
    }
  </code></pre>
  
  <p>If it is in portrait mode, this div is showing</p>
  
  <pre><code>.visible-phone {
      display: inherit !important;
    }
  </code></pre>
  
  <p>I want this div  <code>.visible-tablet</code> to be showing always whenever I switch my tablet to auto-rotate mode(which will be for portrait and landscape)</p>
  
  <p>But I used portrait and landscape conditions, but still I am facing this issue. Any comments?</p>