how to apply css class for landscape mode code example

Example 1: force landscape mode css

// ID/class based landscape mode on/off

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

Example 2: force landscape mode css

<style type="text/css">
    #warning-message{ 
      display: none; 
	}
    @media only screen and (orientation:portrait){
        #wrapper { 
          display:none; 
      	}
        #warning-message { 
          display:block; 
      	}
    }
    @media only screen and (orientation:landscape){
        #warning-message{
          display:none; 
      }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>